pocobueno1388 Posted May 18, 2007 Share Posted May 18, 2007 Hello =] This is one of my first attempts at trying to get some simple javascript code to work...and sadly I am failing, hah. So I was hoping someone could help me out. What I am trying to do is make it so when I click the button, the variable "animal" will change which will change the animal type displayed on the screen right above the button. Here is my current code...which obviously isn't working. <html> <head> <script type="javascript"> <!-- function change_animal() { if (animal == "cow"){ var animal = "horse" } else { var animal = "cow" } //--> </script> </head> <body> <script> animal = "cow" document.write(animal + "<br>") </script> <input type="button" value="Click Me!" onclick="change_animal()"> </body> </html> I am setting the variable animal to "cow" right before I display it to the screen...so I am thinking I am over-riding the function? I don't know how else to set it though... Any help is greatly appreciated, thanks =) Quote Link to comment Share on other sites More sharing options...
mainewoods Posted May 18, 2007 Share Posted May 18, 2007 take the 'var' out of front of all occurances of 'animal' in the function 'change_animal()' put the 'var' in front of this statement of yours: var animal = "cow" your 'change_animal() ' function is missing the trailing '}' to end the function Quote Link to comment Share on other sites More sharing options...
pocobueno1388 Posted May 18, 2007 Author Share Posted May 18, 2007 Thanks for helping ^^ I made the changes and it still doesn't want to cooperate with me =( Here is the updated code: <html> <head> <script> <!-- function change_animal() { if (animal == "cow"){ animal = "horse" } else { animal = "cow" } } //--> </script> </head> <body> <script> var animal = "cow" document.write(animal) </script> <p> <input type="button" value="Change Me." onclick="change_animal()"> </body> </html> Quote Link to comment Share on other sites More sharing options...
pocobueno1388 Posted May 19, 2007 Author Share Posted May 19, 2007 Woooo the javascript forum is dead compared to the PHP one, haha. Quote Link to comment Share on other sites More sharing options...
mainewoods Posted May 19, 2007 Share Posted May 19, 2007 var animal = "cow" document.write(animal) your document.write takes place right after the creation of the variable so of course it has the original value. Try this: <div id="animalID"></div> <input type="button" value="Change Me." onclick="change_animal();document.getElementById('animalID').innerHTML = animal;"> move your script in the body section to the head section and change it like this: <script> var animal = "cow" document.getElementById('animalID').innerHTML = animal; </script> Quote Link to comment Share on other sites More sharing options...
pocobueno1388 Posted May 19, 2007 Author Share Posted May 19, 2007 It is successfully working...but I don't understand how you link: <div id="animalID"></div> To anything at all 0_o I can't find how that links to the variable "animal" in anyway. I also don't see in the script where you are writing any text to the screen...maybe the getElementById() function writes to the screen? I understand that function gets the value of a form/input or whatever. Hmm, I am just too confused how this all worked out. I spent the day going through many tutorials and practicing, but the code you gave me just doesn't make sense to me and I worked with all of those in my practice, I guess it is just the "animalID" part throwing me off. Thank you for your help though =D I shall keep playing with things...hah. Oh, here was the final code: <html> <head> <script> <!-- function change_animal() { if (animal == "cow"){ animal = "horse" } else { animal = "cow" } } //--> var animal = "cow" document.getElementById('animalID').innerHTML = animal; </script> </head> <body> <div id="animalID"></div> <input type="button" value="Change Me." onclick="change_animal();document.getElementById('animalID').innerHTML = animal;"> </body> </html> Quote Link to comment Share on other sites More sharing options...
pocobueno1388 Posted May 19, 2007 Author Share Posted May 19, 2007 OH, I think I just might understand! Maybe....Lets see. You are just setting the DIV id to "animalID" as a default value until the "animal" variable replaces that value with the value of the variable? Is that what is going on? Quote Link to comment Share on other sites More sharing options...
mainewoods Posted May 19, 2007 Share Posted May 19, 2007 document.getElementById('animalID').innerHTML = animal; the 'getElementByID()' gets a pointer to the html object with the specified id value in its tag(the div). The 'innerHTML' is a propery of that object and the statement tells it to replace the 'innerHTML' which is basically the contents of that object with the new contents: the variable named animal. innerHTML refers to the area between the tags: <div id="animalID">this is the innerHTML area that will change!</div> i told you one wrong thing. take out the second statement in the head section: var animal = "cow" document.getElementById('animalID').innerHTML = animal; and do this instead: <div id="animalID"><script>document.write(animal);</script></div> --problem accessing dom element in head section before document is parsed and element is created --leave the rest of the code the same Quote Link to comment Share on other sites More sharing options...
pocobueno1388 Posted May 19, 2007 Author Share Posted May 19, 2007 Doing the change you just said to make totally stopped it from working, but that is okay...because it worked fine the other way as well =] Thanks for all your help, I really appreciate it =D 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.