2017-08-29 76 views
1

我有三個變量,需要在四個跨度的innerHTML中放入。我使用的變量是seconds,accurateclickinaccurateclick。我用來獲取這些變量的過程很好。問題是我無法弄清楚如何將他們帶到另一個功能。我會複製我的東西。這將是一個更簡單的版本。Javascript:全局變量不在其他函數中定義

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等於1b等於2,並c等於3,他們都等於不確定。我不知道爲什麼發生這種情況時xyz是全局變量。我認爲他們應該改變設置不同的價值。

這裏是我的實際代碼:

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; 

它說秒,accurateclicks和inaccurateclicks都是不確定的。我不知道爲什麼會發生這種情況,因爲它們是在前面的函數[Game()]中定義的。

+1

哪個在哪跑? 'B()'之前的A()'或其他方式? – vsync

+1

請添加你真正想要的內容。 –

+0

是A()先走 –

回答

0

嘗試寫,

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

原因: '無功' 定義本地變量!

+0

我這樣做的方式是指原始代碼。我不能這樣做。 –

+0

這裏是原來的https://jumpshare.com/b/pvYdm95DIZbWOqOoQNJt# –

+0

如果不行,試試這個:http://jmp.sh/b/pvYdm95DIZbWOqOoQNJt –

0

你做了兩個html文件,這導致js文件重新加載。這就是爲什麼全局變量再次被聲明並被更新爲未定義的原因。解決方案是使用一個html文件並僅重新加載主體。

+0

我需要所有3個html文件。 –

+0

你可以製作一個主體,然後製作兩個僅限於主體的文件,然後您可以將它們互相替換。但是重新加載每個文件都是失去變量的原因。 – Julie

+0

什麼是身體專用文件,我如何替換它? –