javascript - 更改 innerHTML 后，页面自动重新加载？

Question

我正在尝试制作一个简单的 JavaScript/HTML 页面，在获得 URL 后插入音频播放器。每次我按下下面的代码生成的按钮时，音频播放器都会被插入，然后页面似乎会刷新，摆脱了那个 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> .