如何一键重置所有按钮的值

Question

我不知道如何通过一个重置按钮将所有按钮的值重置为默认值 0，有人可以帮忙吗？

JS

var button1 = 0;
var button1 = 0;

function onClick1() {
  button1 += 1;
  document.getElementById("button1").innerHTML = button1;
  };

 function onClick2() {
  button2 += 1;
  document.getElementById("button2").innerHTML = button2;
 };

HTML

<button type="button" onClick="onClick1()">Click</button>
<p><a id="button1">0</a></p>
<button type="button" onClick="onClick2()">Click</button>
<p><a id="button2">0</a></p>

Answer 1

这会很简单...只需添加另一个按钮，并将其 onclick 函数设置为：

function onClick3(){
    button1=button2=-1;
    onClick1();onClick2();
}

Answer 2

这应该有效：

JS:

function onClickReset() {
  button1
  document.getElementById("button1").innerHTML = button1;
  button2
  document.getElementById("button2").innerHTML = button2;
  // .. other code to set buttons to default state
}

HTML:

<button type="button" onClick="onClickReset()">Reset</button>

Answer 3

假设 Reset 有第三个按钮，所以 HTML 将是：

<button type="button" onClick="onClick3()">Reset</button>

Javascript:

function onClick3() {
   button1 = 0
   button2 = 0
   document.getElementById("button1").innerHTML = button1;
   document.getElementById("button2").innerHTML = button2;
};

Answer 4

HTML

<button onclick="reset()">Reset<button>

Javascript

function reset() {
  button1=0;
  button2=0;
  onClick1();
  onClick2();
}

Answer 5

尝试利用 Array.prototype.forEach() 将 button1 、 button2 变量设置为 0 ，每个 a 元素 id 以 "button" 到 0

var button1 = 0;
var button2 = 0;

function onClick1() {
  button1 += 1;
  document.getElementById("button1").innerHTML = button1;
};

function onClick2() {
  button2 += 1;
  document.getElementById("button2").innerHTML = button2;
};

function reset() {
  button1 = button2 = 0;
  [].forEach.call(document.querySelectorAll("[id^=button]"), function(el) {
    el.innerHTML = button1
  });
};

<button type="button" onClick="onClick1()">Click</button>
<p><a id="button1">0</a>
</p>
<button type="button" onClick="onClick2()">Click</button>
<p><a id="button2">0</a>
</p>
<input type="reset" onclick="reset()"/>

Answer 6

我要解决的不仅仅是数字的重置。

考虑放弃 onclick 处理程序以支持 addEventListener. It's best practices, as the on* event attributes and DOM properties are quite outdated. addEventListener 将其全部保留在 JavaScript 中，并有助于促进关注点分离。

另一件事是考虑您在标记中使用了哪些元素。锚点和段落可能不是您想要的，因为它们在语义上没有意义。我会删除该段落，并使用 readonly 输入元素（毕竟它会随着用户输入而变化）。将其全部包装在 form 中，您可以使用标准 reset 行为。

使用 CSS 获得所需的间距和视觉效果。

考虑以下因素：

var buttons = document.querySelectorAll('button');

function increment (event) {
  var input = this.nextElementSibling,
      value = parseInt(input.value) + 1;

  input.value = value;
}

Array.prototype.forEach.call(buttons, function (button) {
  button.addEventListener('click', increment);
});

<form>
  <div>
    <button type="button">Click</button>
    <input type="text" value="0" readonly />
  </div>

  <div>
    <button type="button">Click</button>
    <input type="text" value="0" readonly />
  </div>

  <button type="reset">Reset</button>
</form>

如何一键重置所有按钮的值

How to reset the value of all buttons with one button

html

javascript

css

dom-events