javascript - 简单的单击事件未触发，控制台返回不可能或根本没有错误

Question

document.addEventListener("load", function()
{
var firstGal = document.querySelector("containsNext");

var nextB = document.querySelector("nondynamic");

nextB.addEventListener('click', function(){ firstGal.style.opacity = 0;});
});

这是导致问题的函数，其他一切运行正常。 我只是在继续最终布局想法之前测试一些东西，并想测试非动态下一个按钮是否有效并在单击时为 containsNext 中的图片设置动画。只是为了测试目的而设置不透明度的动画。 如果我尝试在没有加载的情况下运行它，我会收到许多引用错误和各种未定义的元素。奇怪的是，codepen 甚至在我几小时前删除的一些行上给了我错误:-) 好的，通过添加 on load 属性，不会抛出任何错误，但代码不会运行。 我是否忽略了房间里众所周知的大象？ 这两个相关元素都不是动态创建的(与大多数页面不同)。 谢谢各位的提醒。

笔的链接: http://codepen.io/damianocel/pen/gPggLB

Answer 1

Zefiryn 是对的，你应该使用 .由于选择器是 CSS 类，因此将事件监听器添加到对象 window 中更为可靠。请尝试这个:

window.addEventListener( "load", function()
{
    var firstGal = document.querySelector( ".containsNext" );

    var nextB = document.querySelector( ".nondynamic" );

    nextB.addEventListener( 'click', function()
    {

        firstGal.style.opacity = 0;
    } );
} );

另请检查此链接 https://developer.mozilla.org/en-US/docs/Web/Events/load并参见所提供示例下面的注释。

祝你好运!