Query: JS Variables

[deldalton]

The below code works exactly as it’s meant to (well, except for in Safari) and you can see it here: http://codepen.io/deldalton/full/mfoIi

function expandNav() {
var nav = document.getElementById(“navBar”);

if (nav.className == “collapsed”) {
nav.className = “expanded”;
document.getElementById(“navButton”).src=”images/lightNavUp.png”;}
else {
nav.className = “collapsed”;
document.getElementById(“navButton”).src=”images/lightNavDown.png”;}
}

function changeIconOnMouseOver() {

if (document.getElementById(“navBar”).className == “collapsed”) {
document.getElementById(“navButton”).src=”images/lightNavDown.png”;}
else {
document.getElementById(“navButton”).src=”images/lightNavUp.png”;}
}

function changeIconOnMouseOut() {

if (document.getElementById(“navBar”).className == “collapsed”) {
document.getElementById(“navButton”).src=”images/darkNavDown.png”;}
else {
document.getElementById(“navButton”).src=”images/darkNavUp.png”;}
}

However, the following code which is basically the same thing except is using global variables instead of “document.getElementById”s all the time, doesn’t work.

var nav = document.getElementById(“navBar”);
var button = document.getElementById(“navButton”);

function expandNav() {

if (nav.className == “collapsed”) {
nav.className = “expanded”;
button.src=”images/lightNavUp.png”;}
else {
nav.className = “collapsed”;
button.src=”images/lightNavDown.png”;}
}

function changeIconOnMouseOver() {

if (nav.className == “collapsed”) {
button.src=”images/lightNavDown.png”;}
else {
button.src=”images/lightNavUp.png”;}
}

function changeIconOnMouseOut() {

if (nav.className == “collapsed”) {
button.src=”images/darkNavDown.png”;}
else {
button.src=”images/darkNavUp.png”;}
}

Can anyone tell me why?

[Kuzyo]

In chrome works perfectly well

[deldalton]

The link I gave you at the top is using the first batch of code. That works perfectly well. But, the second batch of code there I can’t get to work in any browser.

Turns out it’s because the script was interpreted in the element of the HTML document, before the other elements were loaded. This meant that it couldn’t “document.getElementById” because the element didn’t exist yet.

[Kuzyo]

no I changed the code in codepen and it works

[deldalton]

Oh okay. That’s odd. I couldn’t get it to work. I’ll have another look.

Alternatively, there are three other solutions that could work.

1. I could define the global variables at the end of the HTML document _(this one I’ve already tried and worked)._
2. I could load the whole script at the end of the HTML document.
3. I could define the variables being empty and then create their values after the page load.

[deldalton]

Okay, so I’ve opted for solution “3”. I felt that it would be tidier. So, I now have the following code at the top of my JS script:

var nav;
var button;

function updateVar() {
nav = document.getElementById(“navBar”);
button = document.getElementById(“navButton”);
}

And, I have added this to my HTML document:

Now it works.

Thanks! … :)

[Author]

Posts