CODEWITHSUNDEEP
javascripthtml
Joe
Joe

Reputation: 163

Using onclick with multiple buttons with JavaScript

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!

Upvotes: 2

Views: 10209

Answers (3)

mplungjan
mplungjan

Reputation: 178422

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

Upvotes: 4

Sam Apostel
Sam Apostel

Reputation: 603

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>

Upvotes: 0

marzelin
marzelin

Reputation: 11610

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>

Upvotes: 0

Related Questions