Global Variables in JavaScript to change within function

Question

Hi I am trying to alter a global variable from within a function but it doesn't seem like this is going to work. Here is my JS:

var currentImg = 0;
var totalImg = 0;
var stored_year = 0;
var newYear = 0;    //the variable i want to edit

$("a.work").click(function(){
    var newYear = $(this).html();   // how I want it to be edited
    console.log(newYear);
});

$("#next-button").click(function() {
    if (currentImg == totalImg) {
        currentImg = 0;
    }
    else {
        currentImg++;
    }
    changeImg();
});

$("#previous-button").click(function() {
    if (currentImg == 0) {
        currentImg = totalImg;
    }
    else {
        currentImg--;
    }
    changeImg();
});

function changeImg(galleryYear) {

    if (galleryYear === stored_year) {


        $("#gallery-image").html("<img src='" + galleryYear.x_src[currentImg] + "'>");
        $("#gallery-title").html(galleryYear.x_title[currentImg]);
        $("#gallery-medium").html(galleryYear.x_medium[currentImg]);
        $("#gallery-size").html(galleryYear.x_size[currentImg]);
        $("#gallery-date").html(galleryYear.x_date[currentImg]);

        var userCurrent = currentImg + 1;
        var userTotal = galleryYear.x_id.length;

        $("#current-post").html(userCurrent);
        $("#post-total").html(userTotal);

        var galWidth = $("#gallery-image" > "img").width();
        $("#gallery").width(galWidth);

    }
    else {

        currentImg = 0;
        $("#gallery-image").html("<img src='" + galleryYear.x_src[currentImg] + "'>");
        $("#gallery-title").html(galleryYear.x_title[currentImg]);
        $("#gallery-medium").html(galleryYear.x_medium[currentImg]);
        $("#gallery-size").html(galleryYear.x_size[currentImg]);
        $("#gallery-date").html(galleryYear.x_date[currentImg]);

        var userCurrent = currentImg + 1;
        var userTotal = galleryYear.x_id.length;

        $("#current-post").html(userCurrent);
        $("#post-total").html(userTotal);

        var galWidth = $("#gallery-image" > "img").width();
        $("#gallery").width(galWidth);

        $("#gallery-type").html('<img id="gallery-switch" alt="Kyle Breitenbach Art Gallery Icon" src="images/gallery-icon.png" onClick="gallerySwitch('+window.newYear+')">');

        stored_year = galleryYear;
    }

}

t = 100;
d = 50;

function gallerySwitch(newYear){
    $("#gallery-control-bar").fadeOut(t);
    $("#gallery-image").fadeOut(t);
    $("#info").fadeOut(t);
    $(".gallery-viewer").fadeOut(t);
    $('div.'+newYear).delay(t+d).fadeIn(t); // still not returning a number
}                                                  // other than 0.

function switchBack(){
    currentImg = parseInt($(this).attr('id'));
    alert(currentImg);

    $(".gallery-viewer").fadeOut(t);
    $("#gallery-control-bar").delay(t+d).fadeIn(t);
    $("#gallery-image").delay(t+d).fadeIn(t);
    $("#info").delay(t+d).fadeIn(t);
}

var navB = 0;

$("#mobileNav").click(function() {
    if (navB == 0) {
        $("#mobileMenu").fadeIn(t);
        navB++;
    }
    else {
        $("#mobileMenu").fadeOut(t);
        navB--;
    }
});



$(document).ready(function() {
    changeImg(galleryYear);
});

How do I make variables global from within a function?

Take the var off the variable in the function.

j08691
– j08691

2014-03-06 17:11:54 +00:00
Commented Mar 6, 2014 at 17:11 — j08691
– j08691, Commented Mar 6, 2014 at 17:11

sabof · Accepted Answer · 2014-03-06 17:13:39Z

3

You can have multiple variables with the same name that will shadow each other. Don't add var when you want to use an existing variable.

$("a.work").click(function(){
    newYear = $(this).html();
    console.log(newYear);
});

answered Mar 6, 2014 at 17:13

sabof

8,2024 gold badges32 silver badges53 bronze badges

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

Comments

Julian Ezequiel · Accepted Answer · 2014-03-06 17:14:04Z

2

Just not declare newYear again in the method if you want newYear to take the $('a.work') value:

$("a.work").click(function(){
    newYear = $(this).html();   // how I want it to be edited
    console.log(newYear);
});

answered Mar 6, 2014 at 17:14

Julian Ezequiel

1831 silver badge10 bronze badges

Comments

Adrian Brown · Accepted Answer · 2014-03-06 17:14:03Z

1

You have put var newYear= in the function, this will have created a local version. Make it just newYear =

answered Mar 6, 2014 at 17:14

Adrian Brown

4663 silver badges15 bronze badges

Comments

Álvaro González · Accepted Answer · 2014-03-06 17:14:48Z

1

If you create a local variable with the same name as your global it will take precedence:

var newYear = 0;
$("a.work").click(function(){
    var newYear = $(this).html(); // This is not your global newYear
}

You'll have to use the fully-qualified name:

var newYear = 0;
$("a.work").click(function(){
    var newYear = $(this).html(); // This is not your global newYear
    window.newYear  = 'This is your global newYear';
}

But code with globals is already hard enough to maintain without duplicate names. I suggest you use unique names.

answered Mar 6, 2014 at 17:14

Álvaro González

147k45 gold badges282 silver badges378 bronze badges

Collectives™ on Stack Overflow

Global Variables in JavaScript to change within function

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related