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/