Javascript:全局变量未在其他函数中定义

Question

我需要将三个变量放入四个跨度的 innerHTML 中。我使用的变量是秒、准确点击和不准确点击。我用来获取这些变量的过程很好。问题是我不知道如何将它们转移到另一个函数。我将复制我所拥有的东西。这将是一个更简单的版本。

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);
}

会发生的情况是，a 等于 1，b 等于 2，和c等于3，它们都等于未定义。我不知道当 x、y 和 z 是全局变量时为什么会发生这种情况。我认为当设置为不同的值时它们应该改变。

这是我的实际代码:

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%";  
        }
    }
}

每当我运行它时，它都会工作到这一点

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

它说秒、accuracyclicks 和 inaccurateclicks 都是未定义的。我不知道为什么会发生这种情况，因为它们是在前面的函数 [Game()] 中定义的。

Answer 1

尝试写作，

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();

原因:'var'在本地定义变量!