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部分放入更新号码功能，以便每次点击时调用它。

＆＃13;

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;
}

＆＃13;

    <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>

＆＃13;

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);
}
});

Javascript Onclick功能只能使用一次

3 个答案: