0

标题基本概括了所有内容。我是一个真正喜欢电脑、视频游戏和机器人的新手......任何数字化的东西。任何人，我最近才开始编程，因为我正在考虑制作自己的网站并且我希望它尽可能棒。更不用说，这是一个很好的技能。我肯定会做更多的设计网站，而不是从事我现在的糟糕工作。但我离题了，我从 OREILLY 的“Head First HTML5 Programming”的第 3 章中获取了这段代码。我做了“一些”调整，但没什么大不了的。如您所见，它只是一个简单的小播放列表管理器，具有一些功能和警报。乍一看，页面看起来应该如此。但是当你输入一首歌曲并点击“添加歌曲”按钮时......什么也没有发生！！此外，“警报”不起作用！为什么？！我做错了什么？！减去我对其进行的一些不相关和“有意”的定制，它与书中使用的公式相同，它应该可以工作。“每次”有人输入一首歌曲时，“ul.appendChild(li)”应该将它添加到播放列表中......对吗？！？！无论如何，这里是 html/javascript：

<!doctype html>
<html lang="en">
<head>
<title>RTH</title>
<meta charset="utf-8">
<script>

window.onload = init;

function init() {

Var button = document.getElementById("addButton");

button.onclick = handleButtonClick;

}


function handleButtonClick() {

var textInput = document.getElementById("songTextInput");

var songName = textInput.value;

} if (songName == "") {

alert("Enter a track!");

} else {

alert("Congrats...track is now being added!");

}


var li = document.createElement("li");

li.innerHTML = songName;

var ul = document.getElementById("playlist");

ul.appendChild(li);

}

</script>
<body>
<form>

<Input type = "text" Id = "songTextInput" size = "40" placeholder = "Insert track here...">

<Input type = "button" id = "addButton" value = "Add Song">


</form>
<strong>

<ul id="playlist">


</ul>
</strong>
</body>
</html>
4

1 回答 1

1

嗨修改后的代码是，

<!doctype html>
<html lang="en">
<head>
<title>RTH</title>
<meta charset="utf-8">
<script>


function handleButtonClick() {

var textInput = document.getElementById("songTextInput");

var songName = textInput.value;

 if (songName == "") {

alert("Enter a track!");

} else {

alert("Congrats...track is now being added!");

}


var li = document.createElement("li");

li.innerHTML = songName;

var ul = document.getElementById("playlist");

ul.appendChild(li);

}

</script>
<body>
<form>

<Input type = "text" Id = "songTextInput" size = "40" placeholder = "Insert track here..."/>

<Input type = "button" id = "addButton" onclick="handleButtonClick();" value = "Add Song"/>


</form>
<strong>

<ul id="playlist">


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

它工作正常。

问题是，

不需要 window.onload ，因为该功能在按钮单击时触发。那是我在代码中更改的唯一内容。抱歉耽搁了

于 2013-03-15T04:20:46.503 回答