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

这应该有效：

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 2

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

考虑放弃onclick处理程序，转而使用addEventListener。这是最佳实践，因为on*事件属性和DOM属性已经过时了。 addEventListener将所有内容保存在JavaScript中，并有助于促进关注点的分离。

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

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

请考虑以下事项：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

这很简单......只需添加另一个按钮，让它具有onclick功能：

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

Answer 4

我们假设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 5

HTML

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

的Javascript

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

Answer 6

尝试使用Array.prototype.forEach()将button1，button2变量设置为0，每个a元素设置为id，以{{1}开头到"button"

＆＃13;

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

＆＃13;

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

6 个答案: