我正在处理一个网页，其中有一个带有onclick事件侦听器的按钮，用于在动态生成的元素之间切换。第一次单击按预期工作，但第一次单击后，事件侦听器似乎不再触发。以下是我的JavaScript的相关部分：

document.addEventListener('DOMContentLoaded', function () {
    // ... (other initialization code)

    trdmDisplayed = 1;

    nextbtn = document.querySelector('.nextbtn');

    nextbtn.addEventListener('click', function () {
        console.log(`trdm when the button is first clicked: ${trdmDisplayed}`);
        currentlyDisplayed = document.querySelector(`.indexdiv .shading-div:nth-child(${trdmDisplayed})`);
        currentlyDisplayed.style.display = "none";

        trdmDisplayed = (trdmDisplayed % 20) + 1;

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

字符串
这是我的HTML：

<div class="movies-container">
    {%for movie in movies %}
        <div class="shading-div" id="trdm-{{movie.id}}">
              /*
                    other elements...
              */

              <div>
                    <button class="nextbtn" ><i class="fas fa-arrow-right"></i></button>
              </div>
        </div>
     {%endfor%}
</div>

型
补充说明：动态生成的元素由一组固定的20个元素组成，第一次点击按钮后，第一个元素成功从element.style.display =“block”;到“none”，第二个元素按预期从“none”转换到“block”，所有内容都记录到控制台上。但是，在第二次单击按钮时，没有信息被记录到控制台，这表明根本没有调用事件侦听器。
我尝试使用ChatGPT来查找错误，但没有任何工作，我已经修改了我的JavaScript很多次，但仍然没有任何工作。我已经检查了我的html和我的css的任何潜在的错误，并不能找到任何。