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：

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

あなたはボタンが簡単なボタンではなく、 "送信" ボタンを可能にする必要があります。

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

代わりに、あなたは可能性があり周囲を取り除くだけです<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; 
}