JavaScript ile birden çok düğmeyi onclick ile kullanma

Question

Uzun, çok sayfalı bir HTML belgesinde, aynı görünen ve aynı şeyi yapan birden fazla düğme eklemek istiyorum (location.reload();). Kodu tekrarlama fikriyle, hepsinde işe yarayan tek bir onclick olayı yapmak istiyorum. Ama nasıl olduğunu anlayamıyorum.

<button class="reloadButton">Reload</button> gibi bir kimlik yerine, hepsi aynı .class "reloadButton" değerini vererek oynamaya çalıştım. Sonra var reload = documents.getElementsByClassName("reloadButton"); kullanmayı denedim.

Ama oradan ne yapacağımı bilmiyorum. reload.onclick = function() { location.reload(); } gibi bir şey çalışıyor gibi görünmüyor.

Onclick olayına eklendiğinde tüm dizi benzeri HTMLCollection'dan geçmek için for döngüsünü nasıl kullanacağımı bilmiyorum.

Bu sadece salt JavaScript ile ve benim uzmanlık düzeyim de saf başlangıçlıdır. Öyleyse, bunu bir akılla açıklayabiliyor olsaydınız veya bunu anlayabileceğim bir seviyeyi anlatan bir web sitesini bağlayabilirseniz çok sevinirim. Teşekkür ederim!

Answer 1

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

veya adlandırılmış fonksiyonu ile

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

ayrıca sadece adlandırılmış işlevini kullanabilirsiniz

ve sonra yerine

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

kullanım

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