atrum Posted November 18, 2010 Share Posted November 18, 2010 So, once again I am trying to teach my self javascript. I have run into an output that doesn't make sense (at least to me.) I have a test html form and a test js file. I am just testing out the getElementbyTageName tool, and iterating out each id of the chosen tag name. The element I am after is the span tag. There are 7 of them on the page that I can count (starting from 0 - 6) The output I get includes 3 undefined that I am unable to explain. user_help password_help confirm_password_help email_help confirm_email_help firstname_help lastname_help undefined undefined undefined Please see the code below for specifics. Would any one be able to explain where those undefined items are coming from? //test2.js var span = document.getElementsByTagName("span"); //set span as an object containing all span objects. var x = span.length; //Set x as the total number of span elements on the page. for(x in span){ //run a for statement to write out each of the span elements id attribute values. document.write(span[x].id + "<br />"); } <html> <head> <!-- <script type="text/javascript" src="/js/test.js"></script> --> <link rel="stylesheet" type="text/css" href="/css/test.css" /> </head> <body> <form name="form1" id="form1" action="contact.php" method="post"> <div> <label for="txt_username">User Name: </label> <input type="text" name="txt_username"/> <span id="user_help" class="help"></span> </div> <div> <label for="txt_password">Password: </label> <input type="text" name="txt_password" /> <span id="password_help" class="help"></span> </div> <div> <label for="txt_confirm_password">Confirm Password: </label> <input type="text" name="txt_confirm_password" /> <span id="confirm_password_help" class="help"></span> </div> <div> <label for="txt_email">Email: </label> <input type="text" name="txt_email" /> <span id="email_help" class="help"></span> </div> <div> <label for="txt_confirm_email">Confirm Email: </label> <input type="text" name="txt_confirm_email" /> <span id="confirm_email_help" class="help"></span> </div> <div> <label for="txt_firstname">First Name: </label> <input type="text" name="txt_firstname" /> <span id="firstname_help" class="help"></span> </div> <div> <label for="txt_lastname">Last Name: </label> <input type="text" name="txt_lastname" /> <span id="lastname_help" class="help"></span> </div> <div> <input name="sendData" type="button" value="submit" /> </div> </form> </body> <script type="text/javascript" src="/js/test2.js"></script> </html> Quote Link to comment Share on other sites More sharing options...
atrum Posted November 18, 2010 Author Share Posted November 18, 2010 Btw, After reviewing that js I used as the example. I see now that it makes no sense (even though it partially works) The new statement that does work is the following var span = document.getElementsByTagName("span"); //set span as an object containing all span objects. var x = span.length; //Set x as the total number of span elements on the page. var i = 0; for(i=0;i<x;i++){ //run a for statement to write out each of the span elements id attribute values. document.write(span[i].id + "<br />"); } I am still curious as to what my original code was doing that caused it to pull those 3 undefined elements. Quote Link to comment Share on other sites More sharing options...
seanlim Posted November 19, 2010 Share Posted November 19, 2010 the line : var span = document.getElementsByTagName("span"); returns a NodeList object, and not simply an array of SPANs elements. as such, the NodeList object contains other elements, like the "length" property and other methods. when you use "for(x in span)", it loops thru every element in the NodeList object, including non-SPAN elements. the correct way, as you have figured, is to loop using an iterator and the length property. Quote Link to comment Share on other sites More sharing options...
atrum Posted November 19, 2010 Author Share Posted November 19, 2010 yeah, its tough learning all the different parts and pieces. im so used to php lol. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.