Databases
StackOverflow2013
Postsdbo
PONewbie Trying to re-create Simple Playlist Manager from Ch 3 of OREILLY's "Head First HTML5 Programming"
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PONewbie Trying to re-create Simple Playlist Manager from Ch 3 of OREILLY's "Head First HTML5 Programming"
    text
    copied!<p>The title pretty much says it all. I'm a newbie who really loves computers, video games, &amp; robots...anything digital. Anywho, I've just recently gotten into programming because I was thinking about making my own website &amp; 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 &amp; alerts. At 1st glance, the page looks as it should. But when you type in a song &amp; click the "Add Song" button...NOTHING HAPPENS!! Also, the "alerts" DON'T WORK!! Why?! What did I do wrong?! Minus a few irrelevant &amp; "intentional" customization I made to it, it's the same formula used in the book &amp; 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:</p> <pre><code>&lt;!doctype html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;title&gt;RTH&lt;/title&gt; &lt;meta charset="utf-8"&gt; &lt;script&gt; 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); } &lt;/script&gt; &lt;body&gt; &lt;form&gt; &lt;Input type = "text" Id = "songTextInput" size = "40" placeholder = "Insert track here..."&gt; &lt;Input type = "button" id = "addButton" value = "Add Song"&gt; &lt;/form&gt; &lt;strong&gt; &lt;ul id="playlist"&gt; &lt;/ul&gt; &lt;/strong&gt; &lt;/body&gt; &lt;/html&gt; </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload