请问为什么此代码在onclick事件之后刷新我的页面？

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 : HTML主体包括：

 <!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. 您在表单标签中有一个输入类型Submit 。 A submit button posts the form to the server. 提交按钮帖子的形式向服务器。 Just add return false; 只需添加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 . 从您的js代码上方，无需使用form标签 。 Because we can get directly 因为我们可以直接得到

请问为什么此代码在onclick事件之后刷新我的页面？

问题描述

2 个解决方案

解决方案1
1 已采纳 2014-12-22 07:21:42

解决方案2
0 2014-12-22 07:26:27

请问为什么此代码在onclick事件之后刷新我的页面？

问题描述

2 个解决方案

解决方案1 1 已采纳 2014-12-22 07:21:42

解决方案2 0 2014-12-22 07:26:27

解决方案1
1 已采纳 2014-12-22 07:21:42

解决方案2
0 2014-12-22 07:26:27