2

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!

Joe
  • 153
  • 3
  • 10
  • Are you using jQuery or pure javascript? – Evan Bechtol Apr 14 '16 at 19:58
  • 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 Apr 14 '16 at 19:59
  • No, he is asking how to assign the same functionality to many buttons with the same class – mplungjan Apr 14 '16 at 20:00

3 Answers3

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;
  }
}
mplungjan
  • 169,008
  • 28
  • 173
  • 236
  • 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. – Joe Apr 14 '16 at 20:15
  • 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 Apr 14 '16 at 20:22
  • Ps: I'm off to bed – mplungjan Apr 14 '16 at 20:26
  • 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? – Joe Apr 14 '16 at 20:30
  • Have a look at caniuse- also I would personally standardise on one method. Bonus: easy to convert to jQuery selector – mplungjan Apr 15 '16 at 04:31
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>
marzelin
  • 10,790
  • 2
  • 30
  • 49
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>
Sam Apostel
  • 593
  • 3
  • 18