deepson2 Posted August 27, 2009 Share Posted August 27, 2009 Hello, I want to change my this line document.form1.text1.value=Messages[currentIndx]; to this document.getElementById('text1').value=Messages[currentIndx]; but it seems its not working. the first line represent and work fine for textarea. but i dont want to use textarea, i want to user div so just made the changes but its not working. here is my code with textarea. and its working fine <html> <head> <script type="text/javascript"> currentIndx=0; MyImages=new Array(); MyImages[0]='vulcano.gif'; MyImages[1]='eye.gif'; MyImages[2]='ear.gif'; MyImages[3]='hand.gif'; Messages=new Array() Messages[0]='We learn about our world through the 5 senses'; Messages[1]='We use our eyes to see things'; Messages[2]='Our ears to hear things' Messages[3]='And our sense of touch to feel things.'; imagesPreloaded = new Array(4) for (var i = 0; i < MyImages.length ; i++) { imagesPreloaded[i] = new Image(120,120) imagesPreloaded[i].src=MyImages[i] } /*###### function to write image number in sequence, eg 1 of 4*/ function writeImageNumber() { oSpan=document.getElementById("sp1"); oSpan.innerHTML="Image "+eval(currentIndx+1)+" of "+MyImages.length; } /* ####################### we create the functions to go forward and go back ####################### */ function Nexter(){ if (currentIndx<imagesPreloaded.length-1){ currentIndx=currentIndx+1; document.theImage.src=imagesPreloaded[currentIndx].src document.form1.text1.value=Messages[currentIndx]; } else { currentIndx=0 document.theImage.src=imagesPreloaded[currentIndx].src document.form1.text1.value=Messages[currentIndx]; } writeImageNumber(); } function Backer(){ if (currentIndx>0){ currentIndx=currentIndx-1; document.theImage.src=imagesPreloaded[currentIndx].src document.form1.text1.value=Messages[currentIndx]; } else { currentIndx=3 document.theImage.src=imagesPreloaded[currentIndx].src document.form1.text1.value=Messages[currentIndx]; } writeImageNumber(); } function automaticly() { if (document.form1.automatic.checked) { if (currentIndx<imagesPreloaded.length){ currentIndx=currentIndx } else { currentIndx=0 } writeImageNumber() document.theImage.src=imagesPreloaded[currentIndx].src document.form1.text1.value=Messages[currentIndx]; currentIndx=currentIndx+1; var delay = setTimeout("automaticly()",3500) } } /*###### function to reload the images and text when refresh is pressed ##### */ function setCurrentIndex() { currentIndx=0; document.theImage.src=MyImages[0]; document.form1.text1.value=Messages[0]; writeImageNumber(); } </script> </head> <body onload="setCurrentIndex();automaticly()"> <!-- ####################### start of form for image slide show ####################### --> <form NAME="form1" align="center"> <table BORDER="3"> <tr> <td><img SRC="vulcano.gif" NAME="theImage" HEIGHT="120" WIDTH="120"></td> /* The text area below has the initial value (same as Messages[0]). Later it changed by code*/ <td><textarea rows="4" name="text1" cols="20" wrap="virtual">We learn about our world through our 5 senses.</textarea></td> </tr> <tr> /* The following 2 buttons call the functions Backer() and Nexter(), explained above. */ <td><input type="button" value="<< Previous" name="previous" onClick="Backer()"></td> /* Don't forget the span, where the function writes the current image number!.(You can put this where you like) */ <td><input type="button" value="Next >>" name="next" onClick="Nexter()"> <span id="sp1"></span></td> </tr> <tr> <td><div align="right"><p>Automatic:</td> /* Finally, the check box calls the function 'automatically()' when it is clicked. */ <td><input type="checkbox" name="automatic" value="ON" onClick="automaticly()"> </td> </tr> </table> </form> <!-- ####################### end of form for image slide show ####################### --> </body> </html> now i want to get this done according to this code. but its not working <html> <head> <script type="text/javascript"> currentIndx=0; MyImages=new Array(); MyImages[0]='vulcano.gif'; MyImages[1]='eye.gif'; MyImages[2]='ear.gif'; MyImages[3]='hand.gif'; Messages=new Array() Messages[0]='We learn about our world through the 5 senses'; Messages[1]='We use our eyes to see things'; Messages[2]='Our ears to hear things' Messages[3]='And our sense of touch to feel things.'; imagesPreloaded = new Array(4) for (var i = 0; i < MyImages.length ; i++) { imagesPreloaded[i] = new Image(120,120) imagesPreloaded[i].src=MyImages[i] } /*###### function to write image number in sequence, eg 1 of 4*/ function writeImageNumber() { oSpan=document.getElementById("sp1"); oSpan.innerHTML="Image "+eval(currentIndx+1)+" of "+MyImages.length; } /* ####################### we create the functions to go forward and go back ####################### */ function Nexter(){ if (currentIndx<imagesPreloaded.length-1){ currentIndx=currentIndx+1; document.theImage.src=imagesPreloaded[currentIndx].src document.getElementById(text1).value=Messages[currentIndx]; } else { currentIndx=0 document.theImage.src=imagesPreloaded[currentIndx].src document.getElementById(text1).value=Messages[currentIndx]; } writeImageNumber(); } function Backer(){ if (currentIndx>0){ currentIndx=currentIndx-1; document.theImage.src=imagesPreloaded[currentIndx].src document.getElementById('text1').value=Messages[currentIndx]; } else { currentIndx=3 document.theImage.src=imagesPreloaded[currentIndx].src document.getElementById('text1').value=Messages[currentIndx]; } writeImageNumber(); } function automaticly() { if (document.form1.automatic.checked) { if (currentIndx<imagesPreloaded.length){ currentIndx=currentIndx } else { currentIndx=0 } writeImageNumber() document.theImage.src=imagesPreloaded[currentIndx].src document.getElementById('text1').value=Messages[currentIndx]; currentIndx=currentIndx+1; var delay = setTimeout("automaticly()",3500) } } /*###### function to reload the images and text when refresh is pressed ##### */ function setCurrentIndex() { currentIndx=0; document.theImage.src=MyImages[0]; document.getElementById('text1').value = Messages[0]; writeImageNumber(); } </script> </head> <form NAME="form1" align="center"> <div id="text1"> We learn about our world through our 5 senses. </div> <div> <input type="button" value="<< Previous" name="previous" onClick="Backer()"></td> <input type="button" value="Next >>" name="next" onClick="Nexter()"> <span id="sp1"></span></div> <div align="right"><p>Automatic:</p> <input type="checkbox" name="automatic" value="ON" onClick="automaticly()"> </div> </form> </html> Can anyone check my both the code and tell me how can i get my second code to work that is with div? Thnaks in advance Quote Link to comment Share on other sites More sharing options...
JonnoTheDev Posted August 27, 2009 Share Posted August 27, 2009 A div element does not contain a value attribute as form elements do! [code] <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Test</title> <script type="text/javascript"> function setDiv() { var divElement = document.getElementById("text1"); divElement.innerHTML = "Hello World"; } </script> </head> <body> <a href="#" onclick="setDiv();">Display Message</a> <div id="text1"></div> </body> </html> [/code] Quote Link to comment Share on other sites More sharing options...
deepson2 Posted August 27, 2009 Author Share Posted August 27, 2009 Thanks for your reply neil, As you may have seen my first code. i want to do somthing like that. but i dont want to use textarea there so just wanted to keep my div like the following <div id="text1"> We learn about our world through our 5 senses. </div> Could you please tell me how can i change my document.forms to document.getElementById ? so it ll work the same but without the textarea. Quote Link to comment Share on other sites More sharing options...
JonnoTheDev Posted August 27, 2009 Share Posted August 27, 2009 document.getElementById('text1').innerHTML = Messages[currentIndx]; Quote Link to comment Share on other sites More sharing options...
deepson2 Posted August 27, 2009 Author Share Posted August 27, 2009 I have changed what you have suggested. but it seems its not working. <script type="text/javascript"> currentIndx=0; MyImages=new Array(); MyImages[0]='vulcano.gif'; MyImages[1]='eye.gif'; MyImages[2]='ear.gif'; MyImages[3]='hand.gif'; Messages=new Array() Messages[0]='We learn about our world through the 5 senses'; Messages[1]='We use our eyes to see things'; Messages[2]='Our ears to hear things' Messages[3]='And our sense of touch to feel things.'; imagesPreloaded = new Array(4) for (var i = 0; i < MyImages.length ; i++) { imagesPreloaded[i] = new Image(120,120) imagesPreloaded[i].src=MyImages[i] } /*###### function to write image number in sequence, eg 1 of 4*/ function writeImageNumber() { oSpan=document.getElementById("sp1"); oSpan.innerHTML="Image "+eval(currentIndx+1)+" of "+MyImages.length; } /* ####################### we create the functions to go forward and go back ####################### */ function Nexter(){ if (currentIndx<imagesPreloaded.length-1){ currentIndx=currentIndx+1; document.theImage.src=imagesPreloaded[currentIndx].src document.getElementById('text1').innerHTML=Messages[currentIndx]; } else { currentIndx=0 document.theImage.src=imagesPreloaded[currentIndx].src document.getElementById('text1').innerHTML=Messages[currentIndx]; } writeImageNumber(); } function Backer(){ if (currentIndx>0){ currentIndx=currentIndx-1; document.theImage.src=imagesPreloaded[currentIndx].src document.getElementById('text1').innerHTML = Messages[currentIndx]; } else { currentIndx=3 document.theImage.src=imagesPreloaded[currentIndx].src document.getElementById('text1').innerHTML = Messages[currentIndx]; } writeImageNumber(); } function automaticly() { if (document.form1.automatic.checked) { if (currentIndx<imagesPreloaded.length){ currentIndx=currentIndx } else { currentIndx=0 } writeImageNumber() document.theImage.src=imagesPreloaded[currentIndx].src document.getElementById('text1').innerHTML = Messages[currentIndx]; currentIndx=currentIndx+1; var delay = setTimeout("automaticly()",3500) } } /*###### function to reload the images and text when refresh is pressed ##### */ function setCurrentIndex() { currentIndx=0; document.theImage.src=MyImages[0]; document.getElementById('text1').innerHTML = Messages[0]; writeImageNumber(); } </script> <form NAME="form1" align="center"> <div id="text1" wrap="virtual"> We learn about our world through our 5 senses. </div> <input type="button" value="<< Previous" name="previous" onClick="Backer()"></td> <input type="button" value="Next >>" name="next" onClick="Nexter()"> <span id="sp1"></span> <div align="right"><p>Automatic:</p> <input type="checkbox" name="automatic" value="ON" onClick="automaticly()"> </div> </form> Could you plesse check it and tell me why its not working.? Quote Link to comment Share on other sites More sharing options...
JonnoTheDev Posted August 27, 2009 Share Posted August 27, 2009 document.theImage is undefined. That is clear. What web browser are you using? Use Firefox and use the error console to debug! tools >> error console Quote Link to comment Share on other sites More sharing options...
deepson2 Posted August 27, 2009 Author Share Posted August 27, 2009 using error console, i have removed some error. here is my code <html> <head> <script type="text/javascript"> currentIndx=0; Messages=new Array() Messages[0]='We learn about our world through the 5 senses'; Messages[1]='We use our eyes to see things'; Messages[2]='Our ears to hear things' Messages[3]='And our sense of touch to feel things.'; imagesPreloaded = new Array(4) for (var i = 0; i < MyImages.length ; i++) { imagesPreloaded[i] = new Image(120,120) imagesPreloaded[i].src=MyImages[i] } /*###### function to write image number in sequence, eg 1 of 4*/ function writeImageNumber() { oSpan=document.getElementById("sp1"); oSpan.innerHTML="Image "+eval(currentIndx+1)+" of "+MyImages.length; } /* ####################### we create the functions to go forward and go back ####################### */ function Nexter(){ if (currentIndx<imagesPreloaded.length-1){ currentIndx=currentIndx+1; document.getElementById('text1').innerHTML=Messages[currentIndx]; } else { currentIndx=0 document.getElementById('text1').innerHTML=Messages[currentIndx]; } writeImageNumber(); } function Backer(){ if (currentIndx>0){ currentIndx=currentIndx-1; document.getElementById('text1').innerHTML = Messages[currentIndx]; } else { currentIndx=3 document.getElementById('text1').innerHTML = Messages[currentIndx]; } writeImageNumber(); } function automaticly() { writeImageNumber() document.getElementById('text1').innerHTML = Messages[currentIndx]; currentIndx=currentIndx+1; var delay = setTimeout("automaticly()",3500) } } /*###### function to reload the images and text when refresh is pressed ##### */ function setCurrentIndex() { currentIndx=0; document.getElementById('text1').innerHTML = Messages[0]; writeImageNumber(); } </script> </head> <body onload="setCurrentIndex();automaticly()"> <form NAME="form1" align="center"> <div id="text1" wrap="virtual"> We learn about our world through our 5 senses. </div> <input type="button" value="<< Previous" name="previous" onClick="Backer()"></td> <input type="button" value="Next >>" name="next" onClick="Nexter()"> <span id="sp1"></span> <div align="right"><p>Automatic:</p> <input type="checkbox" name="automatic" value="ON" onClick="automaticly()"> </div> </form> </body> </html> but still getting these two error Error: Backer is not defined Error: Nexter is not defined Line: 1 Line: 1 but its already define. so why its showing these error. could you please tell me. Quote Link to comment Share on other sites More sharing options...
JonnoTheDev Posted August 27, 2009 Share Posted August 27, 2009 Why are you using a form? Form buttons will submit the page! Quote Link to comment Share on other sites More sharing options...
deepson2 Posted August 27, 2009 Author Share Posted August 27, 2009 ok,i removed them still getting same errors. what can i do? please help me. Quote Link to comment Share on other sites More sharing options...
JonnoTheDev Posted August 27, 2009 Share Posted August 27, 2009 I haven't the time at the mo to look over the script in its entirety but I may have a look on the weekend. Bookmarked. Quote Link to comment Share on other sites More sharing options...
deepson2 Posted August 28, 2009 Author Share Posted August 28, 2009 ok, thanks neil, can anyone else help me? Quote Link to comment Share on other sites More sharing options...
cbolson Posted September 5, 2009 Share Posted September 5, 2009 Hi, You have several syntax issues with your javascript that prevent it from "finishing" and that is why the code thinks that the functions are not defined. I have gone thorugh it and cleaned out the errors. Try replacing your javscript with this: currentIndx=0; MyImages=new Array(); MyImages[0]='vulcano.gif'; MyImages[1]='eye.gif'; MyImages[2]='ear.gif'; MyImages[3]='hand.gif'; Messages=new Array() Messages[0]='We learn about our world through the 5 senses'; Messages[1]='We use our eyes to see things'; Messages[2]='Our ears to hear things' Messages[3]='And our sense of touch to feel things.'; imagesPreloaded = new Array(4); for (var i = 0; i < MyImages.length ; i++){ imagesPreloaded[i] = new Image(120,120) imagesPreloaded[i].src=MyImages[i] } /*###### function to write image number in sequence, eg 1 of 4*/ function writeImageNumber(){ oSpan=document.getElementById("sp1"); oSpan.innerHTML="Image "+eval(currentIndx+1)+" of "+MyImages.length; } /* ####################### we create the functions to go forward and go back ####################### */ function Nexter(){ if (currentIndx<imagesPreloaded.length-1){ currentIndx=currentIndx+1; document.getElementById('text1').innerHTML=Messages[currentIndx]; }else { currentIndx=0 document.getElementById('text1').innerHTML=Messages[currentIndx]; } writeImageNumber(); } function Backer(){ if (currentIndx>0){ currentIndx=currentIndx-1; document.getElementById('text1').innerHTML = Messages[currentIndx]; }else { currentIndx=3 document.getElementById('text1').innerHTML = Messages[currentIndx]; } writeImageNumber(); } function automaticly() { document.getElementById('text1').innerHTML = Messages[currentIndx]; currentIndx=currentIndx+1; var delay = setTimeout("automaticly()",3500); } /*###### function to reload the images and text when refresh is pressed ##### */ function setCurrentIndex(){ currentIndx=0; document.getElementById('text1').innerHTML = Messages[0]; writeImageNumber(); } Chris PS. yes, it is me again - I'm following you Quote Link to comment Share on other sites More sharing options...
deepson2 Posted September 5, 2009 Author Share Posted September 5, 2009 Hello chris again, Thanks for your reply , I have solved my this problem . actually i forgot to mark this thread as solved one. anyways thanks for your reply. 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.