Initializing global variables in JavaScript

Question

If I have the following line at the top of my .js file how come when I call a function that uses clickButton it says it's null?

In the HTML

<input type="text" onkeydown="toggle()" id="txt1" />
<input name="aButton" id="aButton" type="button" value="ButtonVal" />

In the JS

//global variables
var clickButton = document.getElementById("aButton")
var state = false

function toggle()
{
  if(!state)
      /*here it says clickButton is null but if I put var clickButton = 
      document.getElementById("aButton") in this scope it works*/
      clickButton.disabled = true
  else
    clickButton.disabled = false
}

Also what is the difference (not how I check) between null and undefined? Is it that null has been declared but not assigned a value, where as undefined hasn't even been declared?

I mean this question says "A property to which a programmer has not assigned anything will be undefined, but in order for a property to become null, null must be explicitly assigned to it." but I can guarantee you that I never explicitly assigned null to anything.

`null` and `undefined` are simply some (different) values. There is no further meaning. — melpomene, Feb 21 '13 at 21:05
Post all of your code. `undefined` can mean that a variable isn't defined *or* the variable is defined but has the value `undefined`. It's valid to do `var x = undefined;`. — Blender, Feb 21 '13 at 21:05

score 2 · Accepted Answer · edited May 23 '17 at 11:49

2

This means that document.getElementById("aButton") is returning null. The element with the specified id is not available in the dom or your dom is not ready yet- see https://developer.mozilla.org/en-US/docs/DOM/document.getElementById.

For null vs undefined - refer to What is the difference between the mouseover and mouseenter events?

edited May 23 '17 at 11:49

Community

1
1

answered Feb 21 '13 at 21:05

hop

2,518
11
40
56

Why would it not be accessible by the DOM? If I had the same line of code inside a function it works (are you basically saying I have a typo in my code). – Celeritas Feb 21 '13 at 21:15
1

@Celeritas: That's not what #hop is saying, you need to wait until the DOM is ready to manipulate it right? – Tomas Ramirez Sarduy Feb 21 '13 at 21:20

score 0 · Answer 2 · edited Jun 20 '20 at 09:12

First Question

Be sure that you have a markup like this in your html file:

 <input name="aButton" id="aButton" type="button" value="ButtonVal" />

Be sure that you call the function once the DOM is ready. So, put the link the js in the bottom of your html page. Or inside this:
```
 if (document.readyState === "complete") { //codehere }
```

Second Question

In JavaScript an undefined variable is a variable that as never been declared, or never assigned a value. Let's say you declare var a for instance, then a will be undefined, because it was never assigned any value.

But if you then assign a = null then a will now be null. In JavaScript null is an object (try typeof null in a JavaScript console if you don't believe me), which means that null is a value (in fact even undefined is a value).

You may use those operators to check between undefined an null. For example:

null === null            # => true
undefined === undefined  # => true
undefined === null       # => false
undefined == null        # => true

More? What is the difference between null and undefined in JavaScript?

@Celeritas In most cases, means that the [DOM hierarchy](http://webdesign.about.com/od/dom/a/aa120202a.htm) has been fully constructed. — Tomas Ramirez Sarduy, Feb 21 '13 at 23:26

score -1 · Answer 3 · answered Feb 21 '13 at 21:12

undefined and null are indeed two different types. null is an object and refers to a variable which has been declared but provided a null value whereas undefined in an undeclared variable and is not an object in and of itself.

My guess is you haven't waited for the DOM to be ready so your clickButton variable is attempting to grab an element too early and getting null. Try wrapping it in document.ready or window.onload so that it executes when the DOM is finished loading :-).

window.onload(function() {
    var clickButton = document.getElementById("aButton");
});

Initializing global variables in JavaScript

3 Answers3

First Question

Second Question