im正在尝试制作一个简单的javascript照片库，在这个库中，你可以通过两个按钮将img更改为上一个和下一个，共有9个图像，如果显示第9个图像并按下下一个按钮，它应该显示第一个img，有人能帮我吗？我的代码不起作用。
HTML:
<body>
<img src="img (1).jpg" alt="" height="200">
<button id="previous">previous image</button>
<button id="next">next image</button>
JS:
<script>
let counter = 1;
let img = document.querySelector("img");
let changeImg = function (type) {
if (type == 1) {
counter++
} else {
counter--
}
if (counter <= 0) {
counter = 9
}
img.setAttribute("src", "img ("+counter+").jpeg")
}
let previous = document.getElementById("previous")
let next = document.getElementById("next")
previous.addEventListener("click", chaneImg(1))
next.addEventListener("click", changeImg(2))
感谢
您的问题在于添加侦听器的方式：
previous.addEventListener("click", changeImg(1))
应该是
previous.addEventListener("click", (e) => changeImg(1))
第一个在加载时调用changeImage。
let counter = 1;
let img = document.querySelector("img");
let changeImg = function(type) {
if (type == 1) {
counter++
} else {
counter--
}
if (counter <= 0) {
counter = 9
}
img.setAttribute("src", "img (" + counter + ").jpeg")
}
let previous = document.getElementById("previous")
let next = document.getElementById("next")
previous.addEventListener("click", (_e) => changeImg(1))
next.addEventListener("click", (_e) => changeImg(2))<body>
<img src="https://i.imgur.com/Att5gPe.jpg" alt="" height="200">
<button id="previous">previous image</button>
<button id="next">next image</button>
</body>没有经过测试，但我看到了一些东西：
这行的打字错误：
previous.addEventListener("click", changeImg(1))
chaneImg(1)至changeImg(1)
你也没有一个条件来检查相反的情况：
if (counter <= 0) {
counter = 9
}
所以尝试添加
if (counter >= 9) {
counter = 1
}