循環更改背景顏色與javascript中的開關

Question

因此，我一直在嘗試進行此切換，這很簡單。 聲明變量“ num”開頭等於1，並在“ num”等於2時設置“ if”或“ while”語句，某個div的背景顏色將從白色變為黃色，然后以.5返回第二間隔。 我想的問題是，我似乎無法更改全局變量。 我將其更改為2，並且循環正常工作，但是當它為1時，我嘗試使用該按鈕更改為2，則沒有任何反應！ 這是我到目前為止擁有的JS：

var num = 1;
document.getElementById("numberDisplay").innerHTML = num;
if (num == 2) {
  var flash = setInterval(timer, 1000);
  function timer() {
    document.getElementById("colorChanger").style.backgroundColor = "yellow";
    setTimeout(white, 500);
    function white() {
      document.getElementById("colorChanger").style.backgroundColor = "white";
    }
  }
} else {
  document.getElementById("colorChanger").style.backgroundColor = "white";
  document.getElementById("numberDisplay").innerHTML = num;
}
document.getElementById("buttonOne").onclick=function(){num = 1;}
document.getElementById("buttonTwo").onclick=function(){num = 2;}

編輯：1/30/2018 12:25 pm非常感謝幫助的人！ 我的一個朋友實際上給了我一些建議，那就是使用window.onload和事件計時器！ 這是我想出的：

   var num = 1;

   window.onload = function(){
    var button1 = document.getElementById("buttonOne")
    var button2 = document.getElementById("buttonTwo")
    button1.addEventListener("click",function(){
        num = 2;
    })
    button2.addEventListener("click",function(){
        num = 1;
    })
    setInterval(checkNum, 1000);
   }

   function checkNum() {
    if (num == 2) {
            document.getElementById("buttonOne").style.backgroundColor = "#ccccb3";
            document.getElementById("buttonTwo").style.backgroundColor = "white";
            document.getElementById("lightChanger").style.backgroundColor = "yellow";
            setTimeout(grey, 500);
            function grey() {
            document.getElementById("lightChanger").style.backgroundColor = "grey";
                }
    } else {
        document.getElementById("lightChanger").style.backgroundColor = "grey";
        document.getElementById("buttonOne").style.backgroundColor = "white";
        document.getElementById("buttonTwo").style.backgroundColor = "#ccccb3";
    }
}

Answer 1

您可以直接在點擊處理程序內部使用timer函數，而不是setInterval，您的timer函數就像

var colorChanger = document.getElementById("colorChanger");
function white() {
  colorChanger.style.backgroundColor = "white";
}

function timer(n) {
  num = n;
  if (num == 2) {
    colorChanger.style.backgroundColor = "yellow";
    setTimeout(white, 500);
    return;
  }
  colorChanger.style.backgroundColor = "white";
}

嘗試這個，

---

 var num = 1; var colorChanger = document.getElementById("colorChanger"); function white() { colorChanger.style.backgroundColor = "white"; } function timer(n) { num = n; if (num == 2) { colorChanger.style.backgroundColor = "yellow"; setTimeout(white, 500); return; } colorChanger.style.backgroundColor = "white"; } document.getElementById("buttonOne").onclick = function() { timer(1); } document.getElementById("buttonTwo").onclick = function() { timer(2); } 

 <div id="colorChanger">switch</div> <button id='buttonOne'>1</button> <button id='buttonTwo'>2</button> 

Answer 2

但是當它為1時，我嘗試使用該按鈕將其更改為2，則沒有任何反應！

因為在單擊時，您正在更改變量。 除非可以觀察到，否則不會觸發任何東西。 您將必須將相關代碼包裝為一個函數，然后調用它。

 function timer(n) { function updateBackground(color) { document.getElementById("colorChanger").style.backgroundColor = "yellow"; } var colors = ['white', 'yellow']; updateBackground(colors[n - 1]); if (n === 2) { setTimeout(function() { updateBackground('white') }, 500); } } document.getElementById("buttonOne").onclick = function() { timer(1); } document.getElementById("buttonTwo").onclick = function() { timer(2); } 

 <div id="colorChanger">switch</div> <button id='buttonOne'>1</button> <button id='buttonTwo'>2</button> 

很少有改進，

• 任何不在函數中的變量都將成為全局范圍的一部分。 你應該避免它。
• 我建議避免使用.onclick 。 如果我獲取該元素並將其替換為函數，它將破壞您的代碼。 始終喜歡使用.addEventListener 。 雖然這是自以為是的。
• 您應該使用類而不是設置單獨的樣式。 它保持代碼的清潔和可維護。

 function timer(n) { if (n === 2) { document.getElementById("colorChanger").classList.add("yellow"); setTimeout(function() { document.getElementById("colorChanger").classList.remove("yellow"); }, 500); } } document.getElementById("buttonOne").onclick = function() { timer(1); } document.getElementById("buttonTwo").onclick = function() { timer(2); } 

 .white { background: white; } .yellow { background: yellow; /* This is for demo purpose only */ font-weight: bold; } 

 <div id="colorChanger" class='white'>switch</div> <button id='buttonOne'>1</button> <button id='buttonTwo'>2</button> 

參考文獻：

• 我聽說全局變量不正確，應該使用哪種替代解決方案？
• addEventListener與onclick

Answer 3

我改變了一些東西：

 (function(){ var changeColor = function(num) { document.getElementById("numberDisplay").innerHTML = num; if (num === 2) { var flash = setInterval(timer, 1000); function timer() { document.getElementById("colorChanger").style.backgroundColor = "yellow"; setTimeout(white, 500); function white() { document.getElementById("colorChanger").style.backgroundColor = "white"; } } } else { document.getElementById("colorChanger").style.backgroundColor = "white"; document.getElementById("numberDisplay").innerHTML = num; } } document.getElementById("buttonOne").addEventListener('click', function(evt){ let num = 1; changeColor(num); }); document.getElementById("buttonTwo").addEventListener('click', function(evt){ let num = 2; changeColor(num); }); })(); 

 <div id="numberDisplay"></div> <div id="colorChanger">Color</div> <button id="buttonOne">1</button> <button id="buttonTwo">2</button>