Javascript Onclick函數只能工作一次

我有一個希望很容易的問題。我試圖在我的應用程序中創建一個JS函數，其中HTML中有一個數字，每次點擊時都會從中減去另一個數字，並顯示結果。Javascript Onclick函數只能工作一次

（到目前爲止，這麼多的作品。）

那麼行動應該是可重複的，因此數量還在不斷變得越來越小。

（這部分還沒有工作。）

最後，還有一個復位按鈕，單擊該按鈕後，可將原來的號碼隨機數。

（隨機數是正確找到，但是當你點擊減去它從原來的號碼減去，而不是從隨機選擇更換號碼。）

下面是部分加工的jsfiddle

var s = document.getElementById('incrimentOfNumber').innerHTML 
 
\t var n = document.getElementById('countdownNumber').innerHTML 
 
\t var n = n - s; 
 

 
\t document.getElementById("countdownNumber").onclick = function updateNumber(){ 
 
\t \t this.innerHTML = n; 
 
\t } 
 

 
\t document.getElementById("resetCountdown").onclick = function resetCountdown(){ 
 
\t \t var n = Math.floor(Math.random() * 500) + 200; 
 
\t \t document.getElementById("countdownNumber").innerHTML = n; 
 
\t }

<h3>Count down from the number you see in incriments of <span class="incrimentOfNumber" id="incrimentOfNumber">7</span>. 
 
    \t <br />Tap the number to see the correct answer. 
 
    \t <br />Repeat as needed. 
 
\t </h3> 
 

 
    <div class="countdownNumber"> 
 
    \t <h1 id="countdownNumber">284</h1> 
 
\t </div> 
 

 
    <div class="btn" id="resetCountdown">Reset</div>

任何人都可以（1）仔細檢查我做了什麼，以確保我沒有做的事情在一個笨方法和（2）幫助我弄清楚如何獲得可重複的操作函數的寧？

來源

2017-04-08 Liz

唉唉，倒退到一個被丟棄的方法。將編輯OP。 – Liz

'this.innerHTML = n'分配完全相同的'n'，當頁面在'var n = n - s;'加載時計算_once_'。那'n'再也不會改變。第二個監聽器中的'var n'是一個完全不同的'n'，其範圍僅限於第二個函數。事件監聽器工作正常。該代碼也不會減去任何東西。 – Xufox

我嘗試在'updateNumber'函數中放入'var n = n - s'，但它只是將它變成'undefined' ... – Liz

問題是您只計算一次的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/

來源

2017-04-08 19:43:00 demonofthemist

這是您的工作代碼：

您需要將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>. 
 
    \t <br />Tap the number to see the correct answer. 
 
    \t <br />Repeat as needed. 
 
\t </h3> 
 

 
    <div class="countdownNumber"> 
 
    \t <h1 id="countdownNumber">284</h1> 
 
\t </div> 
 

 
    <div class="btn" id="resetCountdown">Reset</div>

來源

2017-04-08 19:44:44

雖然這是一個很好的解決方案，但它缺乏解釋。 – Xufox

Javascript Onclick函數只能工作一次

回答

相關問題