Javascript: Global Variables Aren't Defined In Other Functions

Question

I have three variables that I need to put in the innerHTML of four spans. The variables I use are seconds, accurateclick, and inaccurateclick. The process I use to get these variables is fine. The problem is I can't figure out how to bring them over to another function. I will make a replica of what I have. This will be a simpler version.

var x;
var y;
var z;

function A(){
    x = 1;
    y = 2;
    z = 3;
    B();
}

function B(){
    var a = "";
    var b = "";
    var c = "";
    var d = "";
    a += x;
    b += y;
    c += z;
    d += (x + y + z);
}

What would happen is, instead of a being equal to 1, b being equal to 2, and c being equal to 3, they would all equal to undefined. I don't know why that is happening when x, y, and z are global variables. I thought they should change when set to a different value.

Here is my actual code:

var seconds;
var accurateclicks;
var inaccurateclicks;
var windowheight = window.innerHeight;
var windowwidth = window.innerWidth;
var colors = ["Red", "Orange", "Yellow", "Green", "Blue", "Purple"];
var randomcolor = colors[Math.floor(Math.random()*colors.length)];

function BeginGameLoad(){
    var BottomLabel1 = document.getElementById("bl1");
    var BeginGameContainer = document.getElementById("BGC1");
    var RightClick = false;
    BottomLabel1.addEventListener("mousedown", BL1MD);
    BottomLabel1.addEventListener("mouseup", BL1MU);
    BottomLabel1.style.cursor = "pointer";
    window.addEventListener("resize", BeginGameResize);
    window.addEventListener("contextmenu", BeginGameContextMenu);
    function BeginGameContextMenu(e){
        if(e.which == 3 || e.button == 2){
            e.preventDefault();
        }
    }
    function BL1MD(e){
        if(e.which == 3 || e.button == 2){
            e.preventDefault();
            RightClick = true;
        }
        else{
            var randomcolor = colors[Math.floor(Math.random()*colors.length)];
            BottomLabel1.style.color = randomcolor;
            RightClick = false;
        }
    }
    function BL1MU(){
        if(RightClick == false){
            window.location.href = "Game.html";
            GameLoad();
        }
        else{
            RightClick = false;
        }
    }
    if(windowheight < 600)
    {
        BeginGameContainer.style.height = "600px";
    }
    if(windowwidth < 800)
    {
        BeginGameContainer.style.width = "800px";
    }
    function BeginGameResize(){
        windowheight = window.innerHeight;
        windowwidth = window.innerWidth;
        if(windowheight <= 600)
        {
            BeginGameContainer.style.height = "600px";
        }
        if(windowheight > 600)
        {
            BeginGameContainer.style.height = "100%";  
        }
        if(windowwidth <= 800)
        {
            BeginGameContainer.style.width = "800px";
        }
        if(windowwidth > 800)
        {
            BeginGameContainer.style.width = "100%";  
        }
    }
}
function GameLoad(){
    var LeftPanel2 = document.getElementById("lp2");
    var LeftColorPanel2 = document.getElementById("lcp2");
    var TopPanel2 = document.getElementById("tp2");
    var TopLabel2 = document.getElementById("tl2");
    var RightPanel2 = document.getElementById("rp2")
    var RightLabel2 = document.getElementById("rl2");
    var GameContainer = document.getElementById("GC2");
    var MiddleLabelTwo = document.getElementById("mltwo3");
    var MiddleLabelThree = document.getElementById("mlthree3");
    var MiddleLabelFour = document.getElementById("mlfour3");
    var MiddleLabelFive = document.getElementById("mlfive3");
    var clickedRightName = false;
    var clickedRightColor = false;
    var clickedRightNameColor = false;
    var RightClick = false;
    var ClickedLeftColorPanel = false;
    var ClickedRightLabel = false;
    var ClickedTopLabel = false;
    var Timer;
    TopPanel2.addEventListener("mouseup", TP2MU);
    TopLabel2.addEventListener("mousedown", TL2MD);
    TopLabel2.addEventListener("mouseup", TL2MU);
    TopLabel2.style.cursor = "pointer";
    LeftPanel2.addEventListener("mouseup", LP2MU);
    LeftColorPanel2.addEventListener("mouseup", LCP2MU);
    LeftColorPanel2.addEventListener("mousedown", LCP2MD);
    LeftColorPanel2.style.cursor = "pointer";
    RightPanel2.addEventListener("mouseup", RP2MU);
    RightLabel2.addEventListener("mouseup", RL2MU);
    RightLabel2.addEventListener("mousedown", RL2MD);
    RightLabel2.style.cursor = "pointer";
    window.addEventListener("resize", GameResize);
    window.addEventListener("contextmenu", GameContextMenu);
    function AddSeconds(){
        seconds++;
    }
    function GameContextMenu(e){
        if(e.which == 3 || e.button == 2){
            e.preventDefault();
        }
    }
    function TL2MD(e){
        if(e.which == 3 || e.button == 2){
            e.preventDefault();
            RightClick = true;
        }
        else if(clickedRightName == true && clickedRightColor == true && clickedRightNameColor == true){
            TopLabel2.style.color = randomcolor;
            RightClick = false;
        }
    }
    function TP2MU(){
        if(ClickedTopLabel == false){
            inaccurateclicks++;
        }
        else{
            ClickedTopLabel = false;
        }
    }
    function TL2MU(){
        ClickedTopLabel = true;
        if(clickedRightName == true && clickedRightColor == true && clickedRightNameColor == true && RightClick == false){
            clearInterval(Timer);
            accurateclicks++;
            window.location.href = "EndGame.html";
            EndGameLoad();
        }
        else if (!clickedRightName == true && !clickedRightColor == true && !clickedRightNameColor == true && RightClick == false){
            clearInterval(Timer);
            Timer = setInterval(AddSeconds, 1000);
            seconds = 0;
            accurateclicks = 0;
            inaccurateclicks = 0;
            TopLabel2.innerHTML = randomcolor;
            RightClick = false;
        }
        else{
            inaccurateclicks++;
        }
        RightClick == false
    }
    function LCP2MD(e){
        if(e.which == 3 || e.button == 2){
            e.preventDefault();
            RightClick = true;
        }
        else{
            RightClick = false;
        }
    }
    function LCP2MU(){
        ClickedLeftColorPanel = true;
        if(clickedRightColor == false && TopLabel2.innerHTML != "Click Here To Start" && RightClick == false){
            var randomcolor2 = colors[Math.floor(Math.random()*colors.length)];
            while (randomcolor2.toLowerCase() == LeftColorPanel2.style.backgroundColor){
                randomcolor2 = null;
                randomcolor2 = colors[Math.floor(Math.random()*colors.length)];
                if(randomcolor2.toLowerCase() != LeftColorPanel2.style.color){
                    LeftColorPanel2.style.backgroundColorr = randomcolor2;
                    accurateclicks++;
                    break;
                }
            }
            if(randomcolor2.toLowerCase() != LeftColorPanel2.style.backgroundColor){
                LeftColorPanel2.style.backgroundColor = randomcolor2;
                accurateclicks++;
            }
            if (LeftColorPanel2.style.backgroundColor == randomcolor.toLowerCase()){
                clickedRightColor = true;
                LeftColorPanel2.style.cursor = "auto";
            } 
            randomcolor2 = null;
            RightClick = false;
        }
        else if(clickedRightColor == true && RightClick == false){
            inaccurateclicks++;
        }
    }
    function LP2MU(){
        if(ClickedLeftColorPanel == false){
            inaccurateclicks++;   
        }
        else{
            ClickedLeftColorPanel = false;
        }
    }
    function RL2MD(e){
        if(e.which == 3 || e.button == 2){
            e.preventDefault();
            RightClick = true;
        }
        else{
            RightClick = false;
        }
    }
    function RL2MU(){
        ClickedRightLabel = true;
        if(clickedRightName == false && TopLabel2.innerHTML != "Click Here To Start" && RightClick == false){
            var randomcolor2 = colors[Math.floor(Math.random()*colors.length)];
            while (randomcolor2 == RightLabel2.innerHTML){
                randomcolor2 = null;
                randomcolor2 = colors[Math.floor(Math.random()*colors.length)];
                if(randomcolor2 != RightLabel2.innerHTML){
                    RightLabel2.innerHTML = randomcolor2;
                    accurateclicks++;
                    break;
                }
            }
            if(randomcolor2 != RightLabel2.color){
                RightLabel2.innerHTML = randomcolor2;
                accurateclicks++;
            }
            if (RightLabel2.innerHTML == randomcolor){
                clickedRightName = true;
            }
            randomcolor2 = null;
        }
        else if(clickedRightName == true && clickedRightNameColor == false && RightClick == false){
            var randomcolor2 = colors[Math.floor(Math.random()*colors.length)];
            while (randomcolor2.toLowerCase() == RightLabel2.style.color){
                randomcolor2 = null;
                randomcolor2 = colors[Math.floor(Math.random()*colors.length)];
                if(randomcolor2.toLowerCase() != RightLabel2.style.color){
                    RightLabel2.style.color = randomcolor2;
                    accurateclicks++;
                    break;
                }
            }
            if(randomcolor2.toLowerCase() != RightLabel2.style.color){
                RightLabel2.style.color = randomcolor2;
                accurateclicks++;
            }
            if (RightLabel2.style.color == randomcolor.toLowerCase()){
                clickedRightNameColor = true;
                RightLabel2.style.cursor = "auto";
            }
            randomcolor2 = null;
        }
        else if(clickedRightName == true && clickedRightNameColor == true && RightClick == false){
            inaccurateclicks++;
        }
    }
    function RP2MU(){
        if(ClickedRightLabel == false){
            inaccurateclicks++;
        }
        else{
            ClickedLeftColorPanel = false;
        }
    }
    if(windowheight < 600)
    {
        GameContainer.style.height = "600px";
    }
    if(windowwidth < 800)
    {
        GameContainer.style.width = "800px";
    }
    function GameResize(){
        windowheight = window.innerHeight;
        windowwidth = window.innerWidth;
        if(windowheight <= 600)
        {
            GameContainer.style.height = "600px";
        }
        if(windowheight > 600)
        {
            GameContainer.style.height = "100%";  
        }
        if(windowwidth <= 800)
        {
            GameContainer.style.width = "800px";
        }
        if(windowwidth > 800)
        {
            GameContainer.style.width = "100%";  
        }
    }
}
function EndGameLoad(){
    var BottomLabel3 = document.getElementById("bl3");
    var EndGameContainer = document.getElementById("EGC3");
    var MiddleLabelTwo = document.getElementById("mltwo3");
    var MiddleLabelThree = document.getElementById("mlthree3");
    var MiddleLabelFour = document.getElementById("mlfour3");
    var MiddleLabelFive = document.getElementById("mlfive3");
    var RightClick = false;
    BottomLabel3.addEventListener("mousedown", BL3MD);
    BottomLabel3.addEventListener("mouseup", BL3MU);
    BottomLabel3.style.cursor = "pointer";
    window.addEventListener("resize", EndGameResize);
    MiddleLabelTwo.innerHTML += seconds;
    MiddleLabelThree.innerHTML += accurateclicks;
    MiddleLabelFour.innerHTML += inaccurateclicks;
    MiddleLabelFive.innerHTML += seconds + accurateclicks + inaccurateclicks;
    window.addEventListener("contextmenu", EndGameContextMenu);
    function EndGameContextMenu(e){
        if(e.which == 3 || e.button == 2){
            e.preventDefault();
        }
    }
    function BL3MD(e){
        if(e.which == 3 || e.button == 2){
            e.preventDefault();
            RightClick = true
        }
        else{
            randomcolor = colors[Math.floor(Math.random()*colors.length)];
            BottomLabel3.style.color = randomcolor;
            RightClick = false;
        }
    }
    function BL3MU(){
        if(RightClick == false){
            MiddleLabelTwo.innerHTML = "Time (Seconds): "
            MiddleLabelThree.innerHTML = "Accurate Clicks: "
            MiddleLabelFour.innerHTML = "Inaccurate Clicks: "
            MiddleLabelFive.innerHTML = "Score: "
            window.location.href = "Game.html";
        }
    }
    if(windowheight < 600)
    {
        EndGameContainer.style.height = "600px";
    }
    if(windowwidth < 800)
    {
        EndGameContainer.style.width = "800px";
    }
    function EndGameResize(){
        windowheight = window.innerHeight;
        windowwidth = window.innerWidth;
        if(windowheight <= 600)
        {
            EndGameContainer.style.height = "600px";
        }
        if(windowheight > 600)
        {
            EndGameContainer.style.height = "100%";  
        }
        if(windowwidth <= 800)
        {
            EndGameContainer.style.width = "800px";
        }
        if(windowwidth > 800)
        {
            EndGameContainer.style.width = "100%";  
        }
    }
}

Whenever I run it, it works up to this point

MiddleLabelTwo.innerHTML += seconds;
MiddleLabelThree.innerHTML += accurateclicks;
MiddleLabelFour.innerHTML += inaccurateclicks;
MiddleLabelFive.innerHTML += seconds + accurateclicks + inaccurateclicks;

It says seconds, accurateclicks, and inaccurateclicks are all undefined. I don't know why this would happen given that they were defined in the previous function [Game()].

which runs before which?? `A()` before `B()` or the other way? — vsync, Aug 29 '17 at 07:25
Works as expected http://plnkr.co/edit/fWQNNIxZ1zUjlZXqWNgG?p=preview — hansmaad, Aug 29 '17 at 07:27
Your example is actually working as intented https://jsfiddle.net/f1frrjzv/. Perhaps the problem was how you `declared` these variables in your actual code — masterpreenz, Aug 29 '17 at 07:33
@masterpreenz I need to like you the original code, then. It isn't working. — Bradley William Elko, Aug 29 '17 at 07:35
@hansmaad here is my code: https://jumpshare.com/b/pvYdm95DIZbWOqOoQNJt# — Bradley William Elko, Aug 29 '17 at 07:39
@masterpreenz Here is my code https://jumpshare.com/b/pvYdm95DIZbWOqOoQNJt# — Bradley William Elko, Aug 29 '17 at 07:39
If that doesn't work, try this: http://jmp.sh/b/pvYdm95DIZbWOqOoQNJt — Bradley William Elko, Aug 29 '17 at 07:40
it is better to rewrite your question with your actual problem and not the example one, there explain what is going on. — masterpreenz, Aug 29 '17 at 07:58
@masterpreenz I put my js in the problem. The reason I don't at first is I usually get yelled at for dumping code into the problem. — Bradley William Elko, Aug 29 '17 at 08:03

score 0 · Answer 1 · answered Aug 29 '17 at 07:33

0

try writing,

x = 1;
y = 2;
z = 3;

function A() {
  B();
}

function B() {
  var a = "";
  var b = "";
  var c = "";
  var d = "";
  a += x;
  b += y;
  c += z;
  d += (x + y + z);

  console.log(a, b, c, d);
}
A();

Reason: 'var' defines variables locally!

answered Aug 29 '17 at 07:33

Anurag

13
3

The way i did it is referring to the original code. I can't do it this way. – Bradley William Elko Aug 29 '17 at 07:35

score 0 · Answer 2 · answered Aug 29 '17 at 08:22

0

You did make two html files and this caused the js file to reload. This is why the global variables are declared again and are renewed to undefined.The solution is to work with one html file and to only reload the body.

answered Aug 29 '17 at 08:22

Julie

11
5

I need all 3 html files. – Bradley William Elko Aug 29 '17 at 08:28
you can just make one main and make two body-only files which you can then replace into each other. But reloading with every file is the reason that you lose your variables. – Julie Aug 29 '17 at 08:31
What's a body-only file and how do i replace it? – Bradley William Elko Aug 29 '17 at 08:34
Keep one file. Change the other two to only the code within the body-tags (without the body-tags itself). Then instead of reloading a file. Use jquery and do this: `$("body").load("secondfile.html");` – Julie Aug 29 '17 at 08:43
do you have the js equivalent? – Bradley William Elko Aug 29 '17 at 08:58
`var request = new XMLHttpRequest(); request.open('GET', 'somepage.html', true); request.onload = function() { if (request.status >= 200 && request.status < 400) { var resp = request.responseText; document.querySelector('body').innerHTML = resp; } }; request.send();` This should work when running on localhost. – Julie Aug 29 '17 at 09:15
I just figured out an easier way. Just use localStarage – Bradley William Elko Aug 29 '17 at 09:20

score 0 · Answer 3 · answered Aug 29 '17 at 09:10

0

My syntax was right, but as @Julie mentioned, the variables were being reloaded. How to get JS variable to retain value after page refresh? this helped me solve my problem.

answered Aug 29 '17 at 09:10

Bradley William Elko

364
2
24

Javascript: Global Variables Aren't Defined In Other Functions

3 Answers3