访问 HTMLCollection答案

【问题标题】：Accessing HTMLCollection访问 HTMLCollection
【发布时间】：2018-06-04 15:22:54
【问题描述】：

所以我试图访问所有特定的类名，然后最终向它们添加一个事件侦听器。我这样做是因为我正在构建一个 hightcharts 图表并且无法将点击事件专门添加到图例项。因此，在构建图表后，我尝试访问按钮，然后添加事件侦听器。

  getButtons() {    
    let buttons = document.getElementsByClassName('legend-btn');
    console.log(buttons);
    console.log(buttons[0]);
  },

第一个 console.log 返回一个长度为 48 的 HTMLCollection（我知道很长，但现在它比任何东西都更多用于测试目的）。
第二个 console.log 以未定义的形式返回。任何想法为什么？我希望做这样的事情：

    for (let i = 0; i < buttons.length; i++) {
      buttons[i].addEventListener('click', function () {
        changebackground(event);
      });
    }

关于如何为新建的 highcharts 图表添加点击事件有什么建议吗？

【问题讨论】：

你能举一个例子来复制这个问题吗？我无法重现这个。
在这个问题中与 Vue 无关
这一切都在一个 vue.js 文件中。它与vue 100％相关。在构建图表后，我正在运行 this.getbuttons()。
如果你使用highcharts-legend-item类而不是legend-btn-，一切正常：jsfiddle.net/BlackLabel/vhdr96q4

标签： highcharts htmlcollection pure-js

【解决方案1】：

我建议你试试：

for (let button of buttons) {
  button.addEventListener('click', changebackground);
}

我不知道您为什么要调用changebackground(event)：为此，您必须将event 放在事件侦听器的括号中。最好直接传递changebackground（假设它确实将事件作为参数）。

我不太确定我在告诉你什么：如果不了解更多上下文就很难说清楚。

【讨论】：