Ian Mobbs Ian Mobbs - 3 months ago 6x
HTML Question

After changing innerHTML, page automatically reloads?

I'm trying to make a simple JavaScript/HTML page that inserts an audio player after being given a URL. Every time I press the button that the code below generates, the audio player is inserted, and then the page seems to refresh, getting rid of that HTML.


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


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">
document.getElementById("streamBlock").innerHTML = html;

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


You need to make the button be a simple button, not a "submit" button:

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

Alternatively you could just get rid of the surrounding <form>.