CODEWITHSUNDEEP
javascripthtmlcssdom-events
charlie97
charlie97

Reputation: 51

How to reset the value of all buttons with one button

I can't figure out how to reset the value of all buttons back to 0 as default by just one reset button, can anyone help please?

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>

Upvotes: 0

Views: 4404

Answers (6)

Ling Zhong
Ling Zhong

Reputation: 1804

This should work:

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>

Upvotes: 1

Ekansh Rastogi
Ekansh Rastogi

Reputation: 2536

HTML

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

Javascript

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

Upvotes: 0

Oka
Oka

Reputation: 26355

I'm going to address more than just the resetting of the numbers.

Consider dropping onclick handlers in favour of addEventListener. It's best practices, as the on* event attributes and DOM properties are quite outdated. addEventListener keeps it all in JavaScript, and helps to promote separation of concerns.

Another thing is to consider which elements you are utilizing in your markup. Anchors and paragraphs are likely not what you want, as they don't make sense semantically. I would drop the paragraph, and use a readonly input element (since it is changing on user input, afterall). Wrap it all up in a form and you can use the standard reset behaviour.

Use CSS to get desired spacing, and visual effects.

Consider the following:

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>

Upvotes: 1

guest271314
guest271314

Reputation: 1

Try utilizing Array.prototype.forEach() to set button1 , button2 variables to 0 , each a element with id beginning with "button" to 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()"/>

Upvotes: 0

mohamed-ibrahim
mohamed-ibrahim

Reputation: 11137

Let's say there is a third button to Reset so HTML will be:

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

Javascript:

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

Upvotes: 0

markasoftware
markasoftware

Reputation: 12662

It would be pretty easy...just add another button, and have it's onclick function be:

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

Upvotes: 0

Related Questions