I've tried looking on stackoverflow, but can't quite find the same issue as me - I'm certain the issue is easy to solve, but somehow...it's not working.

I have some inputs, which will add/multiply/subtract/divide etc, in a calculator format. What I want, is to remove unnecessary references to getElementById by declaring the variables outside of my function block (I don't want any fancy multiple-getElementById assignments).

My Javascript is below:

//Declarations: designed to minimze calls to document.getElementByID
    var number1 = document.getElementById("num1");
    var number2 = document.getElementById("num2");
    var numAnswer = document.getElementById("answer");

    //Add together two numbers
    function add()
    {
        numAnswer.value = parseFloat(number1.value) + parseFloat(number2.value);
    }

It's driving me insane - if I take out the variables and just use plain old document.getElementById, everything works. This should be so easy, but it's just not working. I've checked spelling, and it all seems okay - is there something I'm missing?

I've tried looking on stackoverflow, but can't quite find the same issue as me - I'm certain the issue is easy to solve, but somehow...it's not working.

I have some inputs, which will add/multiply/subtract/divide etc, in a calculator format. What I want, is to remove unnecessary references to getElementById by declaring the variables outside of my function block (I don't want any fancy multiple-getElementById assignments).

My Javascript is below:

//Declarations: designed to minimze calls to document.getElementByID
    var number1 = document.getElementById("num1");
    var number2 = document.getElementById("num2");
    var numAnswer = document.getElementById("answer");

    //Add together two numbers
    function add()
    {
        numAnswer.value = parseFloat(number1.value) + parseFloat(number2.value);
    }

It's driving me insane - if I take out the variables and just use plain old document.getElementById, everything works. This should be so easy, but it's just not working. I've checked spelling, and it all seems okay - is there something I'm missing?

• javascript
• dom
• getelementbyid

Share Improve this question Follow asked Sep 8, 2011 at 1:19 Singular1tySingular1ty 2,61511 gold badge2525 silver badges3939 bronze badges 2

• Pretty sure it's all about scopes. – Daniel O'Hara Commented Sep 8, 2011 at 1:23
• I needed the variables to be globals, as I have other functions they have to be used in...my little javascript book at home assures me this should work. And MDN said it should too. :( – Singular1ty Commented Sep 8, 2011 at 1:24

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

This will work provided the script you show in your question appears after the elements in your page source. Otherwise the browser hasn't parsed those elements yet so it can't find them by ID.

The other way to get it to work is to do the assignments in an onload or document-ready handler, because by the time onload or document-ready occurs all elements are accessible no matter where they are in the page source.

Your code works perfectly fine as you've included it in your question. You can see that here: http://jsfiddle/jfriend00/kXrDF/.

What that means is that there is something else wrong that you have not included in your question. Perhaps you can include more of your code so we can help you find what else might be causing it.

To test the scope of your "global" variables, you can set a break point in the add() function and check the values of number1, number2 and numAnswer. If you haven't yet figured out how to set a breakpoint and inspect variables, I'd highly remend doing so. If you still can't, then you can put temporary tests into your add() code like this to narrow down what the issue is:

if (!number1) alert("number1 is not valid");
if (!number2) alert("number2 is not valid");
if (!numAnswer) alert("numAnswer is not valid");

The other possibility is that your code is running too early before the page has been loaded in which case the initial code can't find the DOM elements because they don't exist yet. To prevent that from being an issue, you need to make sure your code doesn't run until after the page has loaded. You can do that by placing your code after the page elements or by using one of the various techniques for detecting when the page has loaded and not running your code that initialized your global variables until then. The frameworks like jQuery and YUI all have built in functions for helping you run code after the page has been loaded.