Home › Forums › JavaScript › Query: JS Variables
- This topic is empty.
-
AuthorPosts
-
July 18, 2013 at 6:53 am #46500
deldalton
ParticipantThe 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?
July 18, 2013 at 9:06 am #143462Kuzyo
ParticipantIn chrome works perfectly well
July 18, 2013 at 9:12 am #143476deldalton
ParticipantThe 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.July 18, 2013 at 9:14 am #143465Kuzyo
Participantno I changed the code in codepen and it works
July 18, 2013 at 9:20 am #143466deldalton
ParticipantOh 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.July 18, 2013 at 10:22 am #143470deldalton
ParticipantOkay, 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! … :)
-
AuthorPosts
- The forum ‘JavaScript’ is closed to new topics and replies.