Javascript Onclick関数は一度しか動作しません

Question

私はうまくいけば簡単に問題があります。私は、HTMLに数字があり、それがクリックされるたびに別の数字が減算され、結果が表示されるアプリケーションでJS関数を作成しようとしています。

（これまでのところ、これだけの作品。）

数が小さくなって続けてその後のアクションは再現可能でなければなりません。

（この部分はまだ動作しません。）

最後に、クリックされたとき、乱数に元の数をリセットし、リセットボタンがあります。ここで

（乱数が正しく発見されていますが、減算する]をクリックしたときに、それはない、ランダムに選択された交換用の番号から、元の数から減算します。）

は、部分的に取り組んで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）私は、反復行動functioを取得する方法を見つけ出す手伝ってくれる寧？あなたは一度だけ、nの値を計算している

Answer 1

問題は、それはこのようにすべてのクリックで計算する必要がありますさにあなたのカウントダウンクリック機能を変更します。ここでは

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一部を配置する必要がありfunctiあなたがクリックするたびに呼び出されます。

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>