Question

我正在尝试将onclick函数应用于三个元素的数组，但设置数组的onclick属性不起作用。任何想法都会非常有用。谢谢！

这是我的代码：

var btnArray = [
document.getElementById('buttonOne'),
document.getElementById('buttonTwo'),
document.getElementById('buttonThree'),
];
console.log(btnArray); 
btnArray.onclick = function revilImg() {
console.log('hey');
}

Answer 1

数组没有onclick属性。您需要首先迭代（我已选择使用Array#forEach），并使用addEventListener将处理程序分别附加到每个DOM元素：

var buttons = [
  'buttonOne',
  'buttonTwo',
  'buttonThree'
].map(document.getElementById, document)

console.log(buttons)

function revealImage () {
  console.log('hey')
}

buttons.forEach(function (e) {
  e.addEventListener('click', revealImage)
})

<button id="buttonOne">#1</button>
<button id="buttonTwo">#2</button>
<button id="buttonThree">#3</button>

Answer 2

添加这样的事件监听器，循环遍历数组并为每个对象添加处理程序

var btnArray = [
  document.getElementById('buttonOne'),
  document.getElementById('buttonTwo'),
  document.getElementById('buttonThree'),
];

console.log(btnArray);

for (var i = 0; i < btnArray.length; i++){
  btnArray[i].addEventListener('click', function(){
    console.log('hey');
  })
}

如果您的按钮共享一个公共类，即mybuttons，则可以使用querySelecorAll()

var btnArray = document.querySelectorAll('.mybuttons');

console.log(btnArray);

for (var i = 0; i < btnArray.length; i++){
  btnArray[i].addEventListener('click', function(){
    console.log('hey');
  })
}

尝试使用onclick函数访问数组

2 个答案: