The assignment variable getElementById does not work

Question

I tried looking at stackoverflow but cannot find the same problem as me - I'm sure the problem is easy to solve, but for some reason ... it doesn't work.

I have several inputs that will add / multiply / subtract / divide, etc. in calculator format. I want to remove unnecessary references to getElementById by declaring variables outside of my function block (I don't want any fancy assignments with multiple getElementById).

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 drives me crazy - if I infer variables and just use the plain old document.getElementById , everything works. It should be that simple, but it just doesn't work. I checked the spelling and it all looks fine - is there something I am missing?

Answer 1

This will work if the script you show in your question appears after the elements in the source of your page. Otherwise, the browser did not analyze these elements, but could not find them by identifier.

Another way to make it work is to make assignments in the onload or document handler, because at the time of onload or to the finished document, all the elements are available no matter where they are on the page source.

Answer 2

Your code is working fine since you included it in your question. You can see it here: http://jsfiddle.net/jfriend00/kXrDF/ .

What does this mean that there is something else wrong that you did not include in your question. Perhaps you can include more of your code so that we can help you find something else that might cause it.

To check the scope of your "global" variables, you can set a breakpoint in the add () function and check the values ​​of number1, number2 and numAnswer. If you have not yet figured out how to set a breakpoint and check variables, I would highly recommend doing this. If you still cannot, you can put temporary tests in your add () code, like this, to narrow down what the problem is:

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

Another possibility is that your code starts too early before the page loads, in which case the source code cannot find the DOM elements, because they do not exist yet. So that this is not a problem, you need to make sure that your code does not run until the page loads. You can do this by placing your code after the page elements or using one of the various detection methods when the page has loaded and does not run your code, which until then has initialized your global variables. Frameworks such as jQuery and YUI have built-in functions to help you run code after the page loads.