Grow your CSS skills. Land your dream job.

Query: JS Variables

  • # July 18, 2013 at 6:53 am

    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?

    # July 18, 2013 at 9:06 am

    In chrome works perfectly well

    # July 18, 2013 at 9:12 am

    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.

    # July 18, 2013 at 9:14 am

    no I changed the code in codepen and it works

    # July 18, 2013 at 9:20 am

    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.

    # July 18, 2013 at 10:22 am

    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! … :)

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".