Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    May 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    New guy needs basic help

    First post on the forum... I'm brand new to Javascript and I'm teaching myself using the Headfirst HTML5 book. One of the exercises early in the book is asking me to create a musical playlist where I can add songs that will show up on the screen and also be added to the DOM. However, I'm not able to get it to work or see where my error lies. Any feed back would be great.

    Here's my code:

    Code:
    <!doctype html>
    
    <html lang="en">
    
    <head>
    
    	<title>Webville Tunes</title>
    	<meta charset = "utf-8">
    	<script>
    		
    		function init()	{
    		var button = document.getElementById("addButton");
    		button.onclick = handleButtonClick;
    		window.onload =  init;
    }
    		function handleButtonClick()	{
    		var textInput = document.getElementById("songTextInput");
    		var songName = textInput.value;
    		var li = document.createElement("li");
    			li.innerHTML= songName;
    		var ul = document.getElementById("playlist");
    			ul.appendChild(li);
    	
    	alert ("Button was clicked!");
    	}
    	
    	</script>
    	
    	<link rel = "stylesheet" href="playlist.css">
    
    </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>

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,458
    Thanks
    76
    Thanked 4,373 Times in 4,338 Posts
    Ready to kick yourself?

    Where do you ever call the init function that is needed to assign the onclick function to the button?

    Just add something like
    Code:
    window.onload = init;
    just befroe the </script> tag.

    (Later, you can learn how to add multiple functions to window.onload, but this is enough to get started.)
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #3
    New to the CF scene
    Join Date
    May 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Old Pedant View Post
    Ready to kick yourself?

    Where do you ever call the init function that is needed to assign the onclick function to the button?

    Just add something like
    Code:
    window.onload = init;
    just befroe the </script> tag.

    (Later, you can learn how to add multiple functions to window.onload, but this is enough to get started.)
    Thanks... I really appreciate it.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •