Javascript and the Var statement

0
102

I’m learning javascript. I know, it took me long enough to get around to it, but i’m doing it. I decided that I wanted to try something and put my new found knowledge to work.I created a simple form with a text field and a button. when the button was clicked it would fire a function. My function was originally written like this:

function displaymessage()
{
var newValue = document.getElementById(‘numberValue’).value;
document.write(“<p>you clicked the button</p>”);
document.write(“<p>the value of newnumber is ” + newValue + “</p>”);
}

function displaymessage()

{

document.write(“<p>you clicked the button</p>”);

var newValue = document.getElementById(‘numberValue’).value;

document.write(“<p>the value of newnumber is ” + newValue + “</p>”);

}

And it just wouldn’t work. I struggled with it all afternoon. I tried all kinds of different things to get it to work. the document.write even would work so I knew the function was being called. But, after that nothing. And what’s more, I would get the spinning ball with Firefox.

I finally talked to an asp.net friend of mine this morning and was telling him my tale of woe. He made one suggestion and it was the right one: move the var statement to the front of the function. I did that and it immediately worked. My simple little function was sabatoged by a simple little mistake.

My function is now written like this and it works just fine:

function displaymessage()

{

var newValue = document.getElementById(‘numberValue’).value;

document.write(“<p>you clicked the button</p>”);

document.write(“<p>the value of newnumber is ” + newValue + “</p>”);

}

Now, the question is. why does the var statement have to be in front? If you know, please post it in the comments. I’m curious as to why that is.

1 COMMENT

  1. Document.Write is something that you have to use during the page load. If you use it later, it will replace the whole contents of the page. Therefore the page does not contain the numberValue-element anymore.

  2. Thank you for your reply. That's good information to know and I wasn't aware of that. Here's a copy of the complete code with corrections that I was experimenting with:<html><head>function displaymessage(){var newValue = document.getElementById('numberValue').value;document.write(”
    you clicked the button
    “);document.write(”
    the value of newnumber is ” + newValue + ”
    “);}</head><body><form>
    <input name=”textbox” type=”text” id=”numberValue” />

    <input type=”button” value=”Click me!” onClick=”displaymessage()” />
    </form></body></html>

  3. Document.Write is something that you have to use during the page load. If you use it later, it will replace the whole contents of the page. Therefore the page does not contain the numberValue-element anymore.

  4. Thank you for your reply. That's good information to know and I wasn't aware of that. Here's a copy of the complete code with corrections that I was experimenting with:<html><head>function displaymessage(){var newValue = document.getElementById('numberValue').value;document.write(”
    you clicked the button
    “);document.write(”
    the value of newnumber is ” + newValue + ”
    “);}</head><body><form>
    <input name=”textbox” type=”text” id=”numberValue” />

    <input type=”button” value=”Click me!” onClick=”displaymessage()” />
    </form></body></html>