Question

无法使用 getelementByClassName 设置未定义的属性“onclick”[重复]

2017-10-19

1177

javascript html

我有带类的按钮，但没有 ID，这是按钮标签，我希望单击该按钮时有声音，因此我通过 getElementsByClassName 调用它并添加了此函数

var stopMusicExt = document.getElementsByClassName("slide-control-button-next slide-lockable")[0];
stopMusicExt.onclick = function() {
this.pause();
this.currentTime = 0;
}

但每次浏览器都会显示此错误

未捕获 TypeError：无法设置未定义的属性“onclick”

请问我该怎么做才能解决这个问题？

Answer 1

另外，不要使用事件属性！请改用 addEventListener ( MDN ) 作为现代标准：

var stopMusicExt = document.getElementsByClassName("btn cs-button inflexible slide-control-button-next slide-lockable")[0];

stopMusicExt.addEventListener('click', function() {
  this.pause();
  this.currentTime = 0;
});

为了明确起见，您可以向按钮元素添加 id 属性：

<button id="myButton" class="dtn cs-button inflexible etc">

并使用 getElementById() 方法访问它

var stopMusicExt = document.getElementById("myButton");

Answer 2

您的选择器似乎没有找到您要查找的类名，因此 onclick 处理程序未绑定到您想要的元素。请看以下示例：

var stopMusicExt = document.getElementsByClassName("slide-control-button-next slide-lockable")[0];
stopMusicExt.onclick = function() {
  alert('clicked');
}

.slide-control-button-next {
  background: red;
  height: 100px;
  width: 100px;
}

<div class="slide-control-button-next slide-lockable">

</div>