JavaScript AddEventListener不工作

因此，我尝试制作一个幻灯片，用户可以单击“下一步”浏览图片。我已经为图像创建了一个数组：

var staff = new Array();
staff[0] = "/images/Isabelle.png";
staff[1] = "/images/Nook.png";
staff[2] = "/images/Timothy_Tommy.png";
staff[3] = "/images/Mabel.png";
staff[4] = "/images/Sable.png";
staff[5] = "/images/Labelle.png";

var i = 1;
function nextImage(){
    document.getElementById("slide").src = staff[i];
    if(i < staff.length)
        i++;
    else i = 0; //wraps around to first image
}

以及用于更改图像的功能：

var staff = new Array();
staff[0] = "/images/Isabelle.png";
staff[1] = "/images/Nook.png";
staff[2] = "/images/Timothy_Tommy.png";
staff[3] = "/images/Mabel.png";
staff[4] = "/images/Sable.png";
staff[5] = "/images/Labelle.png";

var i = 1;
function nextImage(){
    document.getElementById("slide").src = staff[i];
    if(i < staff.length)
        i++;
    else i = 0; //wraps around to first image
}

“图像”和“下一步”按钮位于主体内部的div中：

<div class="container">
    <img id ="slide" src="images/Isabelle.png" />
</div>
<div id="next">
    <button type="button">Next</button>
</div>

---

我已尝试查找解决方案和示例代码，但似乎无法实现这一点

尝试将事件处理程序添加为DHTML，这样您就不必等待它加载元素，以防出现问题：

---

下一步

document.body没有方法getElementByIddocument.getElementByIDNextId查看控制台中是否有错误？html中img的路径是相对的，脚本中的路径是绝对的。这可能是个问题。脚本标记在哪里？头身体在相应的html节点之前还是之后？不管你有没有错误，你都应该给我们一个答案。我没有投反对票，但以这种方式将事件和表示层结合起来被认为是不好的做法