如何用一个按钮重置所有按钮的值

How to reset the value of all buttons with one button

本文关键字：按钮 何用一      更新时间：2023-09-26

我不知道如何重置所有按钮的值回到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>

应该可以:

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>

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

考虑放弃onclick处理程序以支持addEventListener。这是最佳实践，因为on*事件属性和DOM属性相当过时。addEventListener将所有这些都用JavaScript保存，并有助于促进关注点分离。

另一件事是考虑在标记中使用哪些元素。锚点和段落可能不是你想要的，因为它们在语义上没有意义。我将删除段落，并使用readonly输入元素(因为它在用户输入时发生变化，毕竟)。在form中，你可以使用标准的重置行为。

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

这很容易…只需添加另一个按钮，并将其onclick功能设置为:

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

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

尝试使用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()"/>

HTML

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

function reset() {
  button1=0;
  button2=0;
  onClick1();
  onClick2();
}
相关文章：