Please why does this code refresh my page after the onclick event?

Question

window.onload = init;

function init() {
    var button = document.getElementById("addButton");
    button.onclick = function () {
        var songTitle = document.getElementById("songTextInput").value;
        if (songTitle == "") alert("Baba Put Something Jare");
        else {
            var playlist = document.getElementById("playlist");
            var song = document.createElement("li");
            song.innerHTML = songTitle;
            playlist.appendChild(song);
        }
    };
}

The HTML body consist of :

 <!doctype html> <html lang="en"> <head> <link rel="stylesheet" href="#" /> <meta charset="UTF-8" /> <title>Web Tunes</title> <script src="playlist.js"></script> </head> <body> <form> <input type="text" id="songTextInput" placeholder="Song Title"> <input type="submit" id="addButton" value="Add Song"> </form> <ul id="playlist"></ul> </body> </html>

The code outputs the new list element but refreshes immediately.. Please help.

Answer 1

You have an input type submit inside a form tag. A submit button posts the form to the server. Just add return false; to stop the form from being posted to the server.

window.onload = init;

function init() {
    var button = document.getElementById("addButton");
    button.onclick = function () {
        var songTitle = document.getElementById("songTextInput").value;
        if (songTitle == "") alert("Baba Put Something Jare");
        else {
            var playlist = document.getElementById("playlist");
            var song = document.createElement("li");
            song.innerHTML = songTitle;
            playlist.appendChild(song);
        }
        return false;
    };
}

Answer 2

<!doctype html>
<html lang="en">

<head>
  <link rel="stylesheet" href="#" />
  <meta charset="UTF-8" />
  <title>Web Tunes</title>
  <script src="playlist.js"></script>
</head>

<body>

    <input type="text" id="songTextInput" placeholder="Song Title">
    <input type="submit" id="addButton" value="Add Song">

  <ul id="playlist"></ul>
</body>

</html>

From above your js code, no need to use the form tag . Because we can get directly

Please why does this code refresh my page after the onclick event?

Question

2 answers

solution1
1 ACCPTED 2014-12-22 07:21:42

solution2
0 2014-12-22 07:26:27

Please why does this code refresh my page after the onclick event?

Question

2 answers

solution1 1 ACCPTED 2014-12-22 07:21:42

solution2 0 2014-12-22 07:26:27

solution1
1 ACCPTED 2014-12-22 07:21:42

solution2
0 2014-12-22 07:26:27