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
– melpomene, Commented Feb 21, 2013 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
– Blender, Commented Feb 21, 2013 at 21:05

Community · Accepted Answer · 2017-05-23 11:49:18Z

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, 2017 at 11:49

CommunityBot

11 silver badge

answered Feb 21, 2013 at 21:05

hop

2,55811 gold badges40 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Celeritas Over a year ago

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

Tomas Ramirez Sarduy Over a year ago

@Celeritas: That's not what #hop is saying, you need to wait until the DOM is ready to manipulate it right?

Community · Accepted Answer · 2020-06-20 09:12:55Z

0

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?

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Feb 21, 2013 at 21:17

Tomas Ramirez Sarduy

17.5k8 gold badges73 silver badges86 bronze badges

1 Comment

Tomas Ramirez Sarduy Over a year ago

@Celeritas In most cases, means that the DOM hierarchy has been fully constructed.

CSilivestru · Accepted Answer · 2013-02-21 21:12:49Z

-1

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");
});

answered Feb 21, 2013 at 21:12

CSilivestru

763 bronze badges

Collectives™ on Stack Overflow

Initializing global variables in JavaScript

3 Answers 3

2 Comments

First Question

Second Question

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

First Question

Second Question

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related