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 Coder
    Join Date
    Dec 2008
    Posts
    55
    Thanks
    18
    Thanked 0 Times in 0 Posts

    Help with simple JavaScript page for school?

    Hi guys, I have an assignment for school that I'm working on that should be really simple, but for some reason it doesn't seem to want to work for me...here are the instructions I am to follow:
    Steps:
    1. Create a web page that utilizes drop-down lists, check boxes, radio buttons, and textboxes in a form to collect information from a user.
    2. On click of a buttton execute a javascript function that will determine the form's control settings and output the information to a textarea.
    3. Store a brief list of comic book titles in an array.
    4. On Form Load add list items to the drop down list using a loop and the array.
    5. Come up with other appropriate uses for the requested controls.
    Pretty straightforward...now, I know quite a bit about JavaScript and maybe a little bit more, but I am by no means an expert (hence why I need help at this point). Here's the code for the page that I've tried to develop, but it doesn't seem to do what I want it to:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Web Management - Lab 1</title>
    
    <script type="text/javascript">
    
    function addOption(selectbox,text,value )
    {
    	var optn = document.createElement("OPTION");
    	optn.text = text;
    	optn.value = value;
    	selectbox.options.add(optn);
    }
    
    function addOption_list(selectbox)
    {
    	var comicBooks = new Array("Batman","Spiderman","Hulk","X-Men","Superman");
    	for (var i=0; i < comicBooks.length;++i)
    		{
    			addOption(document.myForm.comicList, comicBooks[i], comicBooks[i]);
    		}
    }
    
    function doStuff(x)
    {
    	
    	var interests = "";
    	
    	if (x.sports.checked)
    		{
    			interests = interests + "Sports, ";
    		}
    	if (x.videogames.checked)
    		{
    			interests = interests + "Video Games, ";
    		}
    	if (x.televisionmovies.checked)
    		{
    			interests = interests + "Television/Movies, ";
    		}
    	if (x.webdesign.checked)
    		{
    			interests = interests + "Web Design, ";
    		}
    	if (x.programming.checked)
    		{
    			interests = interests + "Programming, "
    		}
    	if (x.other.checked)
    		{
    			interests = interests + "Other";
    
    	printStuff(document.myForm);
    }
    
    function printStuff(x)
    {
    	document.myForm.outputResults.value = "Name: " + document.myForm.name.value + "\nAge: " + document.myForm.age.value + "\nSex: " + document.myForm.sex.value + "\n\nInterests: " + interests"
    }
    
    function handleErr(msg,url,l)
    {
    	txt="There was an error on this page.\n\n";
    	txt+="Error: " + msg + "\n";
    	txt+="URL: " + url + "\n";
    	txt+="Line: " + l + "\n\n";
    	txt+="Click OK to continue.\n\n";
    	alert(txt);
    	return true;
    }
    onerror=handleErr;
    
    </script>
    
    </head>
    
    <body>
    
    <form name="myForm">
    
    <strong>Personal Information:</strong><br />
    Name: <input type="text" name="name"  /><br />
    Age: &nbsp&nbsp <input type="text" name="age"  /><br /><br />
    
    <input type="radio" name="sex" value="Male" /> Male<br />
    <input type="radio" name="sex" value="Female" /> Female<br /><br />
    
    <strong>Interests:</strong><br />
    <input type="checkbox" name="sports"  /> Sports<br />
    <input type="checkbox" name="videogames"  /> Video Games<br />
    <input type="checkbox" name="televisionmovies"  /> Television/Movies<br />
    <input type="checkbox" name="webdesign" /> Web Design<br />
    <input type="checkbox" name="programming" /> Programming<br />
    <input type="checkbox" name="other" /> Other<br /><br />
    
    <strong>Favourite Comic Book:</strong><br />
    <select name="comicList">
    <option value="" >Comic Books</option>
    </select>
    
    <input type="button" name="Submit" value="Submit" onclick="doStuff(document.myForm)" /><br /><br /><br />
    
    <textarea rows="15" cols="50" name="ouputResults" readonly></textarea>
    
    </form>
    
    </body>
    </html>
    One of the main things I am having a problem with is getting the drop down menu to load the items from the array, instead of having them already listed within the form. I tried using this tutorial to get it to work, but so far I haven't been able to resolve whatever the problem seems to be.

    If anyone can give me some help or some pointers, or point me in the right direction for what I'm doing wrong, I'd really appreciate it!

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,079
    Thanks
    203
    Thanked 2,542 Times in 2,520 Posts
    As far as I can see the function
    addOption_list()
    is not called anywhere. Presumably you want it in <body onload

    Two other bugs:
    if (x.other.checked)
    {
    interests = interests + "Other";
    } // missing closing brace

    document.myForm.outputResults.value = "Name: " + document.myForm.name.value + "\nAge: " + document.myForm.age.value + "\nSex: " + document.myForm.sex.value + "\n\nInterests: " + interests " // delete unwanted "


    A teacher informed my son that "There are two words which you should never use in school homework - one is cool and the other is gross". "No problem", replied the boy, "What are the two words?"

  • Users who have thanked Philip M for this post:

    Iconoclast (01-26-2009)

  • #3
    New Coder
    Join Date
    Dec 2008
    Posts
    55
    Thanks
    18
    Thanked 0 Times in 0 Posts
    Aha! Yes, that fixed several of my problems...a question that raises is, when I call the addOption_list() function in my body onload, do I have to pass a parameter through the parenthesis or not? (I'm assuming I don't, but I want to be sure).

    After fixing those issues, my error function gives me this error: on line 61, interests is not defined...that line is my output line, and I'm assuming it has to do with the part right at the end where I try to concatenate the value contained in the interests variable...so how come it isn't working?

    Edit: Ok, I realized the error is occurring because the variable interests is defined within the doStuff() function, but I'm trying to use it within the printStuff() function...I tried declaring the variable outside of both functions, but that returned a syntax error in my Dreamweaver screen...how can I work around this?

    Edit2: Nevermind, I managed to figure it all out! Thanks for your help mate, I probably would have never seen those things!
    Last edited by Iconoclast; 01-26-2009 at 10:47 AM.


  •  

    Posting Permissions

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