[SOLVED] Changing a variable...

pocobueno1388 · 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 =)

mainewoods · 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

pocobueno1388 · 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>

pocobueno1388 · May 19, 2007

Woooo the javascript forum is dead compared to the PHP one, haha.

mainewoods · 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>

pocobueno1388 · 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>

pocobueno1388 · 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?

mainewoods · 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

pocobueno1388 · 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

Sign In

[SOLVED] Changing a variable...

Recommended Posts

pocobueno1388

Link to comment

Share on other sites

mainewoods

Link to comment

Share on other sites

pocobueno1388

Link to comment

Share on other sites

pocobueno1388

Link to comment

Share on other sites

mainewoods

Link to comment

Share on other sites

pocobueno1388

Link to comment

Share on other sites

pocobueno1388

Link to comment

Share on other sites

mainewoods

Link to comment

Share on other sites

pocobueno1388

Link to comment

Share on other sites

Archived

Browse

Activity

Important Information