Using onclick with multiple buttons with JavaScript

Question

In my long, multi-page HTML document, I want to include multiple buttons that look the same and do the same thing (location.reload();). With the idea of not repeating code, I would like to make a single onclick event that works for all of them. But I can't figure out how.

I've tried playing with giving them all the same .class of "reloadButton" instead of an id, such as <button class="reloadButton">Reload</button>. Then I tried to use var reload = documents.getElementsByClassName("reloadButton");.

But I don't know what to do from there. Trying something like reload.onclick = function () { location.reload(); } doesn't seem to work.

I'm not sure how to use a for loop to go through all the array-like HTMLCollection when it's attached to the onclick event.

This is with just pure JavaScript and my level of expertise is pure beginner too. So, I would love it if you might be able to explain it with that in a mind or if you could link a website that explains this at a level I might be able to understand. Thank you!

I'm closing this as a duplicate because you're asking how to loop through an array-like structure, which is answered in the linked question. Adding event listeners is technically a separate question, but again it's one that's been asked many many times. — zzzzBov
– zzzzBov, Commented Apr 14, 2016 at 19:59
No, he is asking how to assign the same functionality to many buttons with the same class — mplungjan
– mplungjan, Commented Apr 14, 2016 at 20:00

mplungjan · Accepted Answer · 2020-09-09 06:45:51Z

4

UPDATED VERSION

window.addEventListener("load", function() { // when the page has loaded
  document.getElementById("NearestStaticContainerForButtons").addEventListener("click", function(e) {
    const tgt = e.target;
    if (tgt.classList.contains("reloadButton")) {
      e.preventDefault(); // stop the button if not type=button 
      location.reload();
    }
  });
});

Older versions

Plain JS:

window.onload=function() { // when the page has loaded
  var bt = document.querySelectorAll(".reloadButton"); // get all buttons with the class
  for (var i=0;i<bt.length;i++) { // newer browsers can use forEach
    bt[i].onclick=function() { // assign anonymous handler
      location.reload();
    }
  }
}

or with a named function

function reloadPage() {
  location.reload();
}
window.onload=function() { // when the page has loaded
  var bt = document.querySelectorAll(".reloadButton"); // get all buttons with the class
  for (var i=0;i<bt.length;i++) { // newer browsers can use forEach
    bt[i].onclick=reloadPage;
  }
}

edited Sep 9, 2020 at 6:45

answered Apr 14, 2016 at 20:00

mplungjan

180k29 gold badges183 silver badges246 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Joe Over a year ago

Thank you. Couple of questions : 1. why querySelectorAll instead of getElementsByClassName 2. is the window.onload required? I experimented without it and it worked also. So curious if it's needed.

mplungjan Over a year ago

1: querySelectorAll is more compatible and standard than getElementByClassName 2. if you place your script at the en of the page after the last button, the window.onload is not needed, otherwise it is

mplungjan Over a year ago

Ps: I'm off to bed

Joe Over a year ago

Thank you, again, mplungjan! So is it considered best practice to use querySelectorAll() over getElementsByTagName() and getElementsByClassName() in all instances? If not, can you link a site where I could read up on when to use each one in terms of best practice?

mplungjan Over a year ago

Have a look at caniuse- also I would personally standardise on one method. Bonus: easy to convert to jQuery selector

marzelin · Accepted Answer · 2016-04-14 20:09:31Z

0

var buttons = document.querySelectorAll('.js-say-hi');
var displayBox = document.querySelector('.js-display-greeting');

// wire displayGreeting function to each button with .js-say-hi class
for (var i=0; i<buttons.length; i++) {
  buttons[i].addEventListener('click', displayGreeting)
}

function displayGreeting(event) {
  var buttonNumber = event.target.textContent[event.target.textContent.length - 1];
  displayBox.textContent += 'hello from button ' + buttonNumber + '! ';  
}

<button class="js-say-hi">Say hi 1</button>
<button class="js-say-hi">Say hi 2</button>
<button class="js-say-hi">Say hi 3</button>
<button class="js-say-hi">Say hi 4</button>
<button class="js-say-hi">Say hi 5</button>
<div class="js-display-greeting"></div>

answered Apr 14, 2016 at 20:09

marzelin

11.7k5 gold badges38 silver badges50 bronze badges

1 Comment

mplungjan Over a year ago

Why answer with unrelated code? Also addEventListener is not supported by older IEs

Sam Apostel · Accepted Answer · 2016-04-14 20:10:04Z

0

you can also just use the named function

function reloadPage() {
  location.reload();
}

and then instead of

<button class="reloadButton">Reload</button>

use

<button onclick="reloadpage();">Reload</button>

answered Apr 14, 2016 at 20:10

Sam Apostel

6034 silver badges18 bronze badges

3 Comments

mplungjan Over a year ago

However that is inline in every single button. Not recommended

Sam Apostel Over a year ago

I didn't know, why is that?

mplungjan Over a year ago

Because you need to separate markup from code (MVC)

Collectives™ on Stack Overflow

Using onclick with multiple buttons with JavaScript

3 Answers 3

5 Comments

1 Comment

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related