Question

我正在尝试使用HTML工具包运行一个小应用程序。这很简单，我有两个表单，一个是文本输入表单，另一个是按钮。键入文本并单击按钮时，事件处理程序应将文本保存在列表中。我甚至使用了window.onload，但文本没有保存在列表中并显示在页面上。我使用过时的HTML文本编辑器，但我用HTML5编写它，所以它不应该向后兼容吗？我在谷歌浏览器中加载了页面，我遇到了同样的问题。

这是小提琴。

http://jsfiddle.net/xcmdvg71/

以下代码。

<!doctype html>
<html lang="en">
<head>
<title>Playlist App</title>
<meta charset="utf-8">
<style>
body {
  font-family: Verdana, Helvetica, sans-serif;
    }
</style>
<script>
  window.onload = init;
    function init() {
      var button = document.getElementById("addButton");
        button.onclick = handleButtonClick();
        }

    function handleButtonClick() {
        // acquire song through dom
        var textInput = document.getElementById("songTextInput");
        var songName = textInput.value;

        // create a new element for song
        var li = document.createElement("li");
        li.innerHTML = songName;
        var ul = document.getElementById("playlist");
        ul.appendChild(li);
        }
</script>


</head>
<body>
            <form>
              <input type="text" id="songTextInput" size="40" placeholder="Song Name">
              <input type="button" id="addButton" value="Add Song">
            </form>

            <ul id="playlist">

            </ul>
</body>
</html>

Answer 1

点击事件似乎无效。在点击功能中设置警报以检查事件是否有效。也许你可以代替：

button.onclick = handleButtonClick();

使用：

element.addEventListener('click',handleButtonClick,false)

无法运行播放列表应用

1 个答案: