innerHTML을 변경하면 페이지가 자동으로 다시로드됩니까?

Question

URL을받은 후 오디오 플레이어를 삽입하는 간단한 JavaScript/HTML 페이지를 만들려고합니다. 아래의 코드가 생성하는 버튼을 누를 때마다 오디오 플레이어가 삽입 된 다음 페이지가 새로 고쳐져 해당 HTML을 제거합니다.

HTML :

<div id="titleBlock"> 
    <h4>Livestream Listener</h4> 
    <p>Enter a livestream URL below so you can listen in-browser.</p> 
    <form> 
     <input id="stream" type="url"> 
     <button onclick="livestreamlisten()" class="btn">Listen</button> 
    </form> 
</div> 
<hr /> 
<div id="streamBlock"> 
</div> 

JS :

<button type="button" onclick="livestreamlisten()" class="btn">Listen</button> 

또는

당신은 할 수 :

function getStreamURL(){ 
    var stream = document.getElementById('stream').value; 
    return stream; 
} 

function insertPlayer(url){ 
    var html = ` 
     <audio controls> 
      <source src="${url}" type="audio/mpeg"> 
      <source src="${url}" type="audio/ogg"> 
     </audio> 
    `; 
    document.getElementById("streamBlock").innerHTML = html; 
} 

function livestreamlisten(){ 
    var url = getStreamURL(); 
    insertPlayer(url); 
} 

Answer 1

당신은 버튼을 간단한 버튼이 아닌 "제출"버튼을 일해야 그냥 주변을 제거 <form>.

Answer 2

중 하나는 @Pointy이 무엇을 제안 할, 또는 livestreamlisten(event) 함수에 이벤트 객체를 전달하고과 같이 그 안에 event.preventDefault() 전화 :

function getStreamURL(){ 
 
    var stream = document.getElementById('stream').value; 
 
    return stream; 
 
} 
 

 
function insertPlayer(url){ 
 
    var html = ` 
 
     <audio controls> 
 
      <source src="${url}" type="audio/mpeg"> 
 
      <source src="${url}" type="audio/ogg"> 
 
     </audio> 
 
    `; 
 
    document.getElementById("streamBlock").innerHTML = html; 
 
} 
 

 
function livestreamlisten(event){ 
 
    event.preventDefault(); // prevent the default behavior of "reloading" 
 
    var url = getStreamURL(); 
 
    insertPlayer(url); 
 
}

<div id="titleBlock"> 
 
    <h4>Livestream Listener</h4> 
 
    <p>Enter a livestream URL below so you can listen in-browser.</p> 
 
    <form> 
 
     <input id="stream" type="url"> 
 
     <button onclick="livestreamlisten(event)" class="btn">Listen</button> 
 
    </form> 
 
</div> 
 
<hr /> 
 
<div id="streamBlock"> 
 
</div>

나는 희망이 도움이!

Answer 3

livestreamlisten() 함수에 return false;을 추가하여 단추가 기본 동작을하지 못하게해야합니다. 이를 사용하지 않으면 양식 제출과 같은 부작용이 발생합니다. 앵커 태그 <a>에도 적용됩니다 (예 : 클릭시 기능을 실행해야하는 링크).

있어서된다 :

function livestreamlisten(){ 
    var url = getStreamURL(); 
    insertPlayer(url); 
    return false; 
}