Jump to content

[SOLVED] Changing a variable...


pocobueno1388

Recommended Posts

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

Link to comment
https://forums.phpfreaks.com/topic/52042-solved-changing-a-variable/
Share on other sites

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>

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>

 

 

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>

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?

 

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

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.