Question

在我的长页面HTML文档中，我希望包含多个看起来相同并执行相同操作的按钮（location.reload（）;）。由于不重复代码的想法，我想制作一个适用于所有代码的onclick事件。但我无法弄清楚如何。

我尝试过给他们提供所有相同的.class of“reloadButton”而不是id，例如<button class="reloadButton">Reload</button>。然后我尝试使用var reload = documents.getElementsByClassName("reloadButton");。

但我不知道该怎么做。尝试类似的东西 reload.onclick = function () { location.reload(); }似乎不起作用。

我不确定如何将on循环连接到onclick事件时使用for循环遍历所有类似数组的HTMLCollection。

这只是纯粹的JavaScript，我的专业水平也是纯粹的初学者。所以，如果您能够在脑海中解释它，或者如果您可以链接一个可以理解的级别解释这个问题的网站，我会很高兴。谢谢！

Answer 1

普通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

＆＃13;

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 + '! ';  
}

＆＃13;

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

＆＃13;

Answer 3

你也可以使用命名函数

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

然后代替

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

使用

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

使用带有JavaScript

3 个答案: