Question

我确定我在这里错过了一些非常简单的东西，但我只是想在我的一个元素中添加一个click事件，但是控制台一直在说'Null不是一个对象'

这是我的标记

<section class="section active">
  <div class="hidden-content">

  </div>
  <button class="button"></button>
</section>

<section class="section">
  <div class="hidden-content">

  </div>
  <button class="button"></button>
</section>

<section class="section">
  <div class="hidden-content">

  </div>
  <button class="button"></button>
</section>

我正在使用的javascript

document.querySelector('.section.active .button').addEventListener('click', function(){
     document.querySelector('.section.active .hidden-content').classList.add('show')
});

我知道我可以这样做一个queryselectorAll并添加点击处理程序

var hiddenContent = document.querySelectorAll('.button');
for (var i = 0; i < button.length; i++) {
    button[i].addEventListener('click', function(){
         document.querySelector('.section.active .hidden-content').classList.add('show')
    });
}

我问的原因是我知道只会有任何时候一个（section.active .button）这就是为什么我很惊讶queryselector对我不起作用，因为它只会返回它找到的第一个将是这个。（除非我当然错了）

感谢任何有关我出错的建议。

由于

Answer 1

问题在于您将点击处理程序添加到隐藏的div，因此它永远不会收到并点击（它的大小为零）。在你的div中放置任何东西都可以点击它。

https://jsfiddle.net/8v0w0nrf/

如果您希望在按钮上执行操作，请选择它们。

使用＆＃34; .hidden-content＆＃34; div，像以前一样：

var div = document.querySelector('.section.active .hidden-content');
div.parentElement.querySelector('.button').addEventListener('click', function(){
    //Do something
});

或者，你可以直接按下按钮：

document.querySelector('.section.active .button').addEventListener('click', function() {
    // Do something
});

但请注意，只要section.active类发生更改，您就需要更新此事件侦听器。

使用queryselector添加单击处理程序不起作用

1 个答案: