Newbie Trying to re-create Simple Playlist Manager from Ch 3 of OREILLY's “Head First HTML5 Programming”
Question
The title pretty much says it all. I'm a newbie who really loves computers, video games, & robots...anything digital. Anywho, I've just recently gotten into programming because I was thinking about making my own website & I want it to be as awesome as possible. Not to mention, it's a pretty good skill to have. I'd definitely make more designing sites than working the crummy job I have now. But I digress, I took this code from Ch 3 of OREILLY's "Head First HTML5 Programming". I made a "few" adjustments, but nothing major. As you see, it's merely a simple little playlist manager with a few functions & alerts. At 1st glance, the page looks as it should. But when you type in a song & click the "Add Song" button...NOTHING HAPPENS!! Also, the "alerts" DON'T WORK!! Why?! What did I do wrong?! Minus a few irrelevant & "intentional" customization I made to it, it's the same formula used in the book & it should work. "Each" time someone enters a song, "ul.appendChild(li)" should add it to the playlist...RIGHT?!?! Well anyway, here's the 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>
1 answers
solution1
1 2013-03-15 04:20:46
Hi the modified code is,
<!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>
It works fine.
The problem is,
There is no need for window.onload since the function is trigerring on the button click. Thats the only thing i changed in the code. sorry for the delay
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.