Использование onclick с несколькими кнопками с JavaScript

Question

В моем длинном многостраничном документе HTML я хочу включить несколько кнопок, которые выглядят одинаково и делают то же самое (location.reload();). С идеей не повторять код, я хотел бы сделать одно событие onclick, которое работает для всех из них. Но я не могу понять, как это сделать.

Я пробовал играть, давая им все равно. Класс «reloadButton» вместо id, например <button class="reloadButton">Reload</button>. Затем я попытался использовать var reload = documents.getElementsByClassName("reloadButton");.

Но я не знаю, что делать дальше. Попытка что-то вроде reload.onclick = function() { location.reload(); } не работает.

Я не уверен, как использовать цикл for, чтобы пройти через весь массив, подобный HTMLCollection, когда он привязан к событию onclick.

Это просто чистый JavaScript, и мой уровень знаний также является чистым новичком. Поэтому мне бы это понравилось, если бы вы могли объяснить это тем, что было в уме, или если бы вы могли связать сайт, который объясняет это на уровне, который я мог бы понять. Спасибо!

Answer 1

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

или с именем функции

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

Answer 2

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>

Answer 3

вы также можете просто использовать функцию с именем

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

, а затем вместо

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

использования

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