Hello; I am currently trying to figure this code that I did and its just not working the way how I want it to work. Basically, I have one function that has to loop through all of the images and once it hit the third image I want it to alert out the image src information. THen the second part is I want it all of the form to alert out which part of the text box is not filled. I got the basic stuff set up but I know there is some minor tweaks. So this is what I have; <html> <head> <script language="javascript"> //Main Function Caller function caller() { //Calling the findimage function alert(findimage()); //Start of the findimage function function findimage() { var images = document.getElementById("2"); //Start of the For Loop (findimage function) for(var counter = 0; counter < 6; counter++) { if(images[counter] == 2) { alert("Found Image #3.. It's source is: " + images.src); } } //End of the For Loop (findimage function) //Calling the findcontrol Function alert(findcontrol()); } //End of the findimage function //Start of the findcontrol function function findcontrol() { var textform = document.myform; var formlength = document.myform.length; //Start of the For Loop (findcontrol function) for (var idform = 0; idform < formlength; idform++) { if(textform[idform].type=="text") { if (textform[idform].value=="") { alert("Sorry! You have not filled in number " + [idform] + " text field"); } } else { alert("Thank you for filling everything in") } } //End of the For Loop (findcontrol function) //End of the findcontrol function } //End of the Caller function } </script> </head> <body> <form name="myform"> <label>First Name</label><br /><input type="text" id="textone" /> <br /> <label>Last Name</label><br /><input type="text" id="texttwo" /> <br /> <label>Address</label><br /><input type="text" id="textthree" /> <br /> <label>Email Address</label><br /><input type="text" id="textfour" /> <p> <img src="images/1.gif" id="0" /> <img src="images/2.gif" id="1" /> <img src="images/3.gif" id="2" /> <img src="images/4.gif" id="3" /> <img src="images/5.gif" id="4" /> </p> <input type="button" value="Click Me" onclick="caller()" /> <input type="reset" value="Reset" /> </form> </body> </html> Code (markup): Thanks, Creations
Too many bugs. var images = document.getElementById("2"); will give you only one image whose id is "2", why are you trying to loop through it? if you want to loop, var images = document.getElementsByTagName("img"); will give you an array of all images. var images = [color=red]document.getElementsByTagName("img")[/color]; //Start of the For Loop (findimage function) for(var counter = 0; counter < [color=red]images.length[/color]; counter++) { if([color=red]counter == 2[/color]) { alert("Found Image #3.. It's source is: " + [color=red]images[counter][/color].src); } } Code (markup):
Hello, THank you very much for helping with the first issue. My next issue is when it loops through the form it only goes to the first one then it goes to the undefined. How can I fix that? The new updated code is below. <html> <head> <script language="javascript"> //Main Function Caller function caller() { //Calling the findimage function alert(findimage()); //Start of the findimage function function findimage() { var images = document.getElementsByTagName("img"); //Start of the For Loop (findimage function) for(var counter = 0; counter < images.length; counter++) { if(counter == 2) { alert("Found Image #3.. It's source is: " + images[counter].src); } } //End of the For Loop (findimage function) alert(findcontrol()); } //End of the findimage function //Start of the findcontrol function function findcontrol() { var textform = document.myform; var formlength = document.myform.length; //Start of the For Loop (findcontrol function) for (var z = 0; z < formlength; z++) { if(textform[z].type=="text") { if (textform[z].value=="") { return("Sorry! You have not filled in " + textform[z].id + " text field!"); return false; } } return("Thank you for filling everything in!") } //End of the For Loop (findcontrol function) //End of the findcontrol function } //End of the Caller function } </script> </head> <body> <form name="myform"> <label>First Name</label><br /><input type="text" id="First Name" /> <br /> <label>Last Name</label><br /><input type="text" id="Last Name" /> <br /> <label>Address</label><br /><input type="text" id="Address" /> <br /> <label>Email Address</label><br /><input type="text" id="Email Address" /> <p> <img src="images/1.gif" id="0" /> <img src="images/2.gif" id="1" /> <img src="images/3.gif" id="2" /> <img src="images/4.gif" id="3" /> <img src="images/5.gif" id="4" /> </p> <input type="button" value="Click Me" onclick="caller()" /> <input type="reset" value="Reset" /> </form> </body> </html> Code (markup): Thanks, Creations
return "Thank you for filling everything in!"; should be called after for loop before the end of the function. And do not put braces around returned text. And no multiple return statements in succession. function findcontrol() { var textform = document.myform; var formlength = document.myform.length; //Start of the For Loop (findcontrol function) for (var z = 0; z < formlength; z++) { if(textform[z].type=="text") { if (textform[z].value=="") { return "Sorry! You have not filled in " + textform[z].id + " text field!"; } } } //End of the For Loop (findcontrol function) return "Thank you for filling everything in!"; //End of the findcontrol function } Code (markup):
And change that alert(findimage()); to findimage(); in function caller. Thats what causing "undefined" alert.