Errors in my Javascript

[xaippo_script]

I have been studying Javascript for quite a while now and I've recently started some projects of my own to try it out. Although my script looks perfectly valid to me, the error console in my browser keeps reporting that my object data type-variables are undefined or
null, but I explicitly declared them at beginning of my script. I have attached two of my projects in hopes that someone might notice the mistake I did and point it out to me and explain why it caused an error and show me the appropriate method. I've included comments in the script to explain what they are meant to do.

Here's the HTML:

<label for="nameField">Enter your name:
<input type="text" size="28"  id="nameField">
</label>

<input type="submit" value="Sumbit"/> <br />

<div></div>

</form>

The script:

<label for="nameField">Enter your name:
<input type="text" size="28"  id="nameField">
</label>

<input type="submit" value="Sumbit"/> <br />

<div></div>

</form>


//Obtain the form in the document

var theForm= document.getElementsByTagName('form');

//Get the form's only text box with the parent.firstChild method

var name=theForm.firstChild;

//Obtain the empty div element where we will greet the user with their name

var writingPlace=document.getElementsByTagName('div');


function writeGreeting(){

//If the text box holds a value 

 if (name.hasValue){

  //Assign the variable 'greeting' with the word 'hi' and and their name,then

  var greeting= 'Hi,' + name.value;

  
 //Assign the contents of 'greeting' to the document's div element 

 writingPlace.appendChild(greeting);

    }

 }    


//When the form is submitted, the function writeGreeting is called and the containg code is 

//performed

theForm.onsubmit=writeGreeting;

Seems pretty overdone,huh?

The second script is a style switcher application:

The HTML:

<div id="mainContent">

 <h2>Customizable Style-Sheets</h2>

 <hr />


<h4>Choose a background pattern:</h4>

<table cellspacing="13" id="samples">

   <tr>

<!--The theme samples-->

<!--leafy sample-->

   <td><img src="leafy_sample.jpg" /></td>


<!--bluecubes sample-->

   <td><img src="bluecubes_sample.jpg" /></td>


<!--leopardskin sample-->   

  <td><img src="leopardSkin_sample.jpg" /></td>

   </tr> 

    <tr>   

<!--lightning sample-->

   <td><img src="lightning_sample.jpg" /></td>


<!--redcubes sample-->

   <td><img src="redcubes_sample.jpg" /></td>

 </tr>

</table>
</div>

The Javascript:

var body= document.getElementsByTagName('body');

//Declare the variable 'class4body' which will hold the class to be applied to the document's

//body

var class4body;

//The variable 'themes' holds all the image samples from the HTML 

var themes= document.images;

//According to sample was clicked, class4body is assigned the theme name

themes[0].onclick=function applyLeafy(class4body){

  class4body='leafy';

    }

themes[1].onclick=function applyBluecubes(class4body){

  
   class4body='bluecubes';

     }

themes[2].onclick= function applyLeopardskin(class4body){


    class4body='leopardskin';

     }


themes[3].onclick=function applyLightning(class4body){


     class4body='lightning';

     }


themes[4].onclick=function applyRedcubes(class4body){


    class4body='redcubes';

     }

//The document's body is given the class of class4body's value

body.className=class4body;

The CSS:

body {background-color:black;}


#mainContent {width:6in;

              position:absolute; left:330px; top:160px;

              padding-top:16px;

              padding-bottom:14px;

              padding-left:18px;

              background-color:#7595bc;

              border:black 5px solid;

              }

               

 hr {width:520px;

    text-align:left;}

    
h2{font-family:ae_AlMothnna;

            font-weight:bold;

            text-align:left;}


h4 {text-align:left;

    font-family:ae_AlMothnna; 

    font-weight:300;

    }

    
#samples td {border:purple 1px solid;}  

[b]

body.leafy {background-image:url("leafy_sample.jpg");} 


body.bluecubes {background-image:url("bluecubes_sample.jpg");}


body.leopardskin {background-image:url("leopardSkin.jpg");}


body.lightning {background-image:url("lightning_sample.jpg");}


body.redcubes {background-image:url("redcubes_sample.jpg");} 

[/b]

Could someone please point out what is going wrong? I'd appreciate it.

--xaippo_script

[R0bb0b]

<label for="nameField">Enter your name:
<input type="text" size="28"  id="nameField">
</label>

<input type="submit" value="Sumbit"/> <br />

<div></div>

</form>

OK, the first thing that comes to mind, and let me know if I'm just missing something, but where's your opening form tag?

[xaippo_script]

OK, the first thing that comes to mind, and let me know if I'm just missing something, but where's your opening form tag?

Oops! Looks like I accidentally skipped it when pasted it out from Bluefish!
I assure you that the original file had it though:

<form>
<label for="nameField">Enter your name:
<input type="text" size="28"  id="nameField">
</label>

<input type="submit" value="Sumbit"/> <br />

<div></div>

</form>

[R0bb0b]

OK, that error could be coming from anywhere. When I'm debugging my js I find myself often putting alerts and commenting out different sections. I would spend a little time using that process to try to narrow down the problem. Once you have an idea of what the problem really is, then you can better address it.

[~s.o.s~]

...or just look at the Error Console in Firefox to get the most out of the goodies provided out-of-the-box with your browser. If you still can't pinpoint the cause, step by step debug using Firebug is the way to go.

[xaippo_script]

OK guys, I'll try it out. Also, S.O.S, I don't find Firefox's built-in error console very helpful, but I'll see if I can get around to installing Firebug. Also, do you think the function handling the event should come after, not before the event handler statement?

[R0bb0b]

The "Error Console" is under tools. If for some reason you can't find it, look for the add-on called "Web Developer" which also provides the error console as well as many other environment testing tools.

[Troy III]

... Although my script looks perfectly valid to me, ...

First Remember this:
In web-design coding world - things are never what they seem!

Here's the HTML:

<!-- <form> open tag has allready been pointed out by others although it doesn't seem to be the problem cause in your original code since back there, you allready have it -->
...

The script:

...

//Obtain the form in the document

var theForm= document.getElementsByTagName('form');

// this will return a FORM collection!
 
 //Get the form's only text box with the parent.firstChild method

var name=theForm.firstChild;

/* this will return UNDEFINED! 
  * you can't pick up a child out of your elements collection, 
  * you should target the elements explicitly.
  *
  * TRY: theForm[0].anymethod
  */
 

//Obtain the empty div element where we will greet the user with their name

var writingPlace=document.getElementsByTagName('div');
//this will return a DIV collection! -How many DIVs do you plan having in your html?
// You should reference your "writingPlace" div by its ID!
/* etc
  every line beyond these errors will fail, so there's no need to coment further

....

Could someone please point out what is going wrong? I'd appreciate it.

--xaippo_script

So don't bother to try debug anything else before you've corrected these initial script errors.

Cheers.

[xaippo_script]

The "Error Console" is under tools. If for some reason you can't find it, look for the add-on called "Web Developer" which also provides the error console as well as many other environment testing tools.

Thanks, I know where to find the error console, I just meant that I don't find it very explanatory.

... Although my script looks perfectly valid to me, ...

First Remember this:
In web-design coding world - things are never what they seem!

Here's the HTML:

<!-- <form> open tag has allready been pointed out by others although it doesn't seem to be the problem cause in your original code since back there, you allready have it -->
...

The script:

//Obtain the form in the document

var theForm= document.getElementsByTagName('form');

// this will return a FORM collection!

//Get the form's only text box with the parent.firstChild method

var name=theForm.firstChild;

/* this will return UNDEFINED! 
  * you can't pick up a child out of your elements collection, 
  * you should target the elements explicitly.
  *
  * TRY: theForm[0].anymethod
  */


//Obtain the empty div element where we will greet the user with their name

var writingPlace=document.getElementsByTagName('div');

//this will return a DIV collection! -How many DIVs do you plan having in your html?
// You should reference your "writingPlace" div by its ID!
/* etc
  every line beyond these errors will fail, so there's no need to coment further

Could someone please point out what is going wrong? I'd appreciate it.

--xaippo_script

So don't bother to try debug anything else before you've corrected these initial script errors.

Cheers.

I thought that because there was only one of each element, a collection wouldn't be returned; but perhaps you have to specify an index either way. I'll try out your suggestions and if they don't work....I don't know what will. Thanks for your attention to the problem.

[R0bb0b]

So don't bother to try debug anything else before you've corrected these initial script errors.

Exactly, concentrate on one error at a time because half the time one error spawns another.

Many times, just from experience, I will know exactly what the problem is but often times it is not so clear and javascript is not the easiest language to debug because line numbers don't line up and errors are so vague. When that happens, I follow these steps.

First: It helps to have a good program with a good undo and redo, I use DW because you can set the amount of steps that remain in memory.
Second: I make a complete copy of the script and set it aside just in case you mess up or program/system crash(It happens and you will kick your own ass).
Third: Comment out or delete(since you can undo) different code blocks, one at a time until you confirm the code block that is giving you the issue.
Fourth: With in the last code block that you commented out, follow step three to further isolate the problem until you finally figure out which line of code is giving you the issue.