[英]How to reset a counter back to 0 with a button in javascript?
I have a counter in javascript right now and a button that adds 1 value to the counter, this is what I have so far:我现在在 javascript 中有一个计数器和一个向计数器添加 1 个值的按钮,这是我到目前为止所拥有的:
var counter = 0; var a = 0; var add = function(valueToAdd){ a += valueToAdd; document.getElementById('Value').innerHTML = a; }
Value $<span id="Value">0</span> <button width="500" height="500" id = add class="button button1" onclick="javascript:add(1)">Add Value</button>
I need a button to reset the counter back to 0 any help is appreciated.我需要一个按钮将计数器重置回 0 任何帮助表示赞赏。
Add a button, reset function and set values to "0" as shown in code below:添加按钮,重置功能并将值设置为“0”,如下代码所示:
<button width="500" height="500" id ="reset" class="button button1"
onclick="javascript:reset()">Reset Value</button>
<script type="text/javascript">
var reset= function(){
a = 0;
document.getElementById('Value').innerHTML = a;
}
</script>
BTW you declared var count = 0 in your code (question) but not using that (apparently).顺便说一句,你在你的代码(问题)中声明了 var count = 0 但没有使用它(显然)。
Some tips:一些技巧:
Here's a cleaner solution:这是一个更清洁的解决方案:
HTML: HTML:
Value $<span id="Value">0</span>
<button id="add">Add Value</button>
<button id="reset">Reset</button>
Javascript: Javascript:
var a = 0;
var add = function(valueToAdd) {
a += valueToAdd;
document.getElementById('Value').innerHTML = a;
}
var reset = function() {
a = 0;
document.getElementById('Value').innerHTML = 0;
}
var addButton = document.querySelector("#add");
var resetButton = document.querySelector("#reset");
addButton.addEventListener("click", function() {
add(1);
})
resetButton.addEventListener("click", function() {
reset();
})
JSFiddle: https://jsfiddle.net/sfh51odm/ JSFiddle: https ://jsfiddle.net/sfh51odm/
Do not define a out of function as a general variable.不要定义出来的功能一般变量。 Every time set the current value to a and continue.
每次将当前值设置为a并继续。 So you can get back to zero:
所以你可以回到零:
var counter = 0; var add = function(valueToAdd){ var a = parseInt(document.getElementById('Value').innerHTML); a += valueToAdd; document.getElementById('Value').innerHTML = a; } function reset(){ document.getElementById('Value').innerHTML=0; }
Value $<span id="Value">0</span> <button width="500" height="500" id = add class="button button1" onclick="javascript:add(1)">Add Value</button> <button width="500" height="500" id = add class="button button1" onclick="javascript:reset()">Reset</button>
var a = 0; var displayValue = document.getElementById('Value'); var updateValue = function () { displayValue.innerHTML = a; }; var add = function (valueToAdd) { a += valueToAdd; updateValue(); }; var reset = function () { a = 0; updateValue(); };
Value $<span id="Value">0</span> <button onclick="add(1)">Add 1</button> <button onclick="reset()">Reset</button>
if you need to do a page refresh (like if you press F5 on the keyboard) this will work for you.如果你需要刷新页面(比如你在键盘上按 F5),这对你有用。
the "location.reload();" “location.reload();” will work also.
也会工作。
change '.again' to a btn name you want.将“.again”更改为您想要的 btn 名称。
document.querySelector('.again').addEventListener('click', function () { location.reload(); });
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.