JavaScript onclick事件监听器首次点击后不再触发问题求助

核心问题 #

你的代码存在两个关键问题导致后续点击无响应：

1. 按钮事件绑定范围错误
   你通过document.querySelector('.nextbtn')仅获取了第一个.nextbtn按钮并绑定点击事件，但循环生成的每个.shading-div里都有一个独立的.nextbtn。首次点击后，第一个.shading-div被设置为display:none，对应的按钮也随之隐藏，后续无法再点击到这个绑定了事件的按钮，自然没有任何响应。

2. 选择器与DOM结构不匹配
   JS代码中使用.indexdiv .shading-div选择元素，但HTML里的父容器是.movies-container，如果实际DOM结构中没有.indexdiv，会导致后续切换时无法正确找到元素（你提到首次点击正常，可能实际HTML中存在.indexdiv包裹，但仍需确保选择器与结构一致）。

修复后的代码 #

JavaScript 代码 #

document.addEventListener('DOMContentLoaded', function () {
    // 用let声明局部变量，避免全局污染
    let trdmDisplayed = 1;
    // 获取所有nextbtn按钮
    const nextBtns = document.querySelectorAll('.nextbtn');
    
    // 给每个按钮绑定点击事件
    nextBtns.forEach(btn => {
        btn.addEventListener('click', function () {
            console.log(`当前显示的序号: ${trdmDisplayed}`);
            // 修正选择器，匹配实际父容器（根据HTML结构替换为movies-container）
            const currentlyDisplayed = document.querySelector(`.movies-container .shading-div:nth-child(${trdmDisplayed})`);
            if (currentlyDisplayed) {
                currentlyDisplayed.style.display = "none";
            }

            trdmDisplayed = (trdmDisplayed % 20) + 1;

            const toDisplay = document.querySelector(`.movies-container .shading-div:nth-child(${trdmDisplayed})`);
            if (toDisplay) {
                toDisplay.style.display = "block";
            }
        });
    });
});

补充优化点 #

• 所有变量使用let/const声明，避免全局变量污染引发的潜在问题
• 添加元素存在性判断，防止找不到元素时抛出控制台错误
• 统一选择器与HTML结构匹配，确保元素能被正确选中

更高效的替代方案：事件委托 #

如果不想给每个按钮单独绑定事件，可以使用事件委托，仅给父容器绑定一次事件，性能更优，且支持后续动态新增元素：

document.addEventListener('DOMContentLoaded', function () {
    let trdmDisplayed = 1;
    const container = document.querySelector('.movies-container');

    container.addEventListener('click', function (e) {
        // 判断点击的目标是nextbtn按钮
        if (e.target.closest('.nextbtn')) {
            console.log(`当前显示的序号: ${trdmDisplayed}`);
            const currentlyDisplayed = container.querySelector(`.shading-div:nth-child(${trdmDisplayed})`);
            if (currentlyDisplayed) {
                currentlyDisplayed.style.display = "none";
            }

            trdmDisplayed = (trdmDisplayed % 20) + 1;

            const toDisplay = container.querySelector(`.shading-div:nth-child(${trdmDisplayed})`);
            if (toDisplay) {
                toDisplay.style.display = "block";
            }
        }
    });
});

内容的提问来源于stack exchange，提问作者Hamzah Alkhateeb