我正在尝试实现以下目标：每次单击“下一步”按钮时都要更改图像。现在，book在我单击next一次按钮之后，代码为我提供了阵列中的最后一张图像。有办法可以做到吗？
HTML代码：
<body>
<div class="main_page">
<button type="button" id="start">Start</button>
<button type="button" id="next">Next</button>
</div>
</body>
JS代码：
document.addEventListener('DOMContentLoaded', () => {
let book = [
{
name: 'page1',
img: 'img/page1.png'
},
{
name: 'page2',
img: 'img/page2.png'
},
{
name: 'page3',
img: 'img/page3.png'
}
]
const main_page = document.querySelector('.main_page');// with this variable I have conttrol of
// div with class .main_page
let mainImg = document.createElement('img') // similar to HTML tag <img>. this var-ble creates <img> tag in HTML Document
mainImg.setAttribute('src', book[0].img) // making attribute to <img> tag through JavaScript
main_page.appendChild(mainImg);// appending <img> tag to the div with class main_page
let next = document.getElementById('next');
const turnPage = (count) =>{
//if(mainImg.getAttribute("src") == 'img/page2.png') alert("hey")//mainImg.src = {firstpage}
next.addEventListener('click', () => {
if(mainImg.getAttribute("src") == book[count].img){
//alert("hey")
mainImg.src = book[count+1].img
}})
}
for(let i = 0; i< book.length; i++){
turnPage(i);
}
})
正如其他人指出的那样，您的代码有一些问题。正如Teemu所说，您将向按钮添加3个单击监听器。您还需要将turn page函数放入侦听器中，而不是在外部调用它。这些是您需要的主要更改：
1：您需要在侦听器和任何循环之外声明一个变量，以保持页数
let count = 0;
2：添加一个监听器，该监听器将turnpage在每次单击时调用您的函数。在该侦听器中，您需要在调用前检查下一页是否大于页面总数turnPage-否则，当代码尝试从不存在的页面访问图像时，您将得到一个错误。
（您可以改为从第1页开始，但是当您具有“开始”按钮时，我假设您打算使用该按钮而不是连续循环）。
next.addEventListener('click', () => {
if ((count+1) < book.length)
turnPage(count);
count++;
})
3：最后，您的turnPage功能只需要设置下一张图片
const turnPage = (count) => {
mainImg.src = book[count + 1].img
}
这是完整的工作片段：
document.addEventListener('DOMContentLoaded', () => {
let book = [{
name: 'page1',
img: 'https://lorempixel.com/output/animals-q-c-200-200-9.jpg'
},
{
name: 'page2',
img: 'https://lorempixel.com/output/animals-q-c-200-200-10.jpg'
},
{
name: 'page3',
img: 'https://lorempixel.com/output/animals-q-c-200-200-4.jpg'
}
]
const main_page = document.querySelector('.main_page'); // with this variable I have conttrol of
// div with class .main_page
let mainImg = document.createElement('img') // similar to HTML tag <img>. this var-ble creates <img> tag in HTML Document
mainImg.setAttribute('src', book[0].img) // making attribute to <img> tag through JavaScript
main_page.appendChild(mainImg); // appending <img> tag to the div with class main_page
let next = document.getElementById('next');
// set up your listener to turn the page on each click
next.addEventListener('click', () => {
let count = 0; // declare your variable for page count
// check if the next page is greater than the total number of pages
if ((count+1) < book.length)
turnPage(count);
count++;
})
// your turnPage function
const turnPage = (count) => {
if (mainImg.getAttribute("src") == book[count].img) {
mainImg.src = book[count + 1].img
}
}
})<body>
<div class="main_page">
<button type="button" id="start">Start</button>
<button type="button" id="next">Next</button>
</div>
</body>仅供参考，我不确定此行的用途，但是我留给了我，以防万一您需要它用于此处未包含的内容：
if (mainImg.getAttribute("src") == book[count].img) {
另外，您可以只在pageTurn中使用count变量，而无需在点击监听器中传递它。您可以检查自己是否到此为止-一切都取决于这与您需要完成的其他工作的配合情况。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句