Javascript Onclick 函數只工作一次

Question

我有一個希望非常簡單的問題。 我正在嘗試在我的應用程序上創建一個 JS 函數，其中 HTML 中有一個數字，每次單擊它時，都會從中減去另一個數字並顯示結果。

（到目前為止，這很有效。）

然后動作應該是可重復的，這樣數字就會越來越小。

（這部分還沒有工作。）

最后，有一個重置按鈕，點擊后會將原始數字重置為隨機數。

（正確找到隨機數，但是當您單擊以減去它時，它會從原始數中減去，而不是從隨機選擇的替換數中減去。）

這是一個部分工作的 JSFiddle

 var s = document.getElementById('incrimentOfNumber').innerHTML var n = document.getElementById('countdownNumber').innerHTML var n = n - s; document.getElementById("countdownNumber").onclick = function updateNumber(){ this.innerHTML = n; } document.getElementById("resetCountdown").onclick = function resetCountdown(){ var n = Math.floor(Math.random() * 500) + 200; document.getElementById("countdownNumber").innerHTML = n; }

 <h3>Count down from the number you see in incriments of <span class="incrimentOfNumber" id="incrimentOfNumber">7</span>. <br />Tap the number to see the correct answer. <br />Repeat as needed. </h3> <div class="countdownNumber"> <h1 id="countdownNumber">284</h1> </div> <div class="btn" id="resetCountdown">Reset</div>

任何人都可以（1）仔細檢查我所做的事情以確保我沒有以愚蠢的方式做事並且（2）幫助我弄清楚如何使可重復的操作發揮作用？

Answer 1

問題是您只計算 n 的值一次，應該在每次點擊時計算，因此將您的倒計時點擊功能更改為：

document.getElementById("countdownNumber").onclick = function updateNumber(){
        var s = document.getElementById('incrimentOfNumber').innerHTML
        var n = document.getElementById('countdownNumber').innerHTML
        n = n - s;
        this.innerHTML = n;
}

這是一個工作演示：

https://jsfiddle.net/m3q8fn2x/

Answer 2

這是您的工作代碼：

您需要將n = n - s部分放入更新編號函數中，以便每次單擊時都會調用它。

 var s = document.getElementById('incrimentOfNumber').innerHTML var n = document.getElementById('countdownNumber').innerHTML document.getElementById("countdownNumber").onclick = function updateNumber() { n = n - s; this.innerHTML = n; } document.getElementById("resetCountdown").onclick = function resetCountdown(){ n = Math.floor(Math.random() * 500) + 200; document.getElementById("countdownNumber").innerHTML = n; }

 <h3>Count down from the number you see in incriments of <span class="incrimentOfNumber" id="incrimentOfNumber">7</span>. <br />Tap the number to see the correct answer. <br />Repeat as needed. </h3> <div class="countdownNumber"> <h1 id="countdownNumber">284</h1> </div> <div class="btn" id="resetCountdown">Reset</div>

Answer 3

如果您仍在為此苦苦掙扎，那么請考慮這樣一個事實，即當您在事件函數中聲明一個變量時，當事件被觸發時，它的起始值始終相同。 所以考慮這個事實並在事件函數的范圍之外聲明變量。

const togglerBtn = document.getElementById("togglerBtn");

let temp = false;
togglerBtn.addEventListener("click", () => {
//   alert();

if (!temp) {
  togglerDiv.style.transform = "translateY(48px)";
  return (temp = true);
} else if (temp) {
  togglerDiv.style.transform = "translateY(-500px)";
  return (temp = false);
}
});