I am learning some JS now and I am having some trouble with a new functionality I am trying to add to a website.
I have designed a div with a preview image and a navigation bar below with 4 thumbnails of the images you can navigate through, I have two buttons so you can navigate through the images quicker. My goal is to change from one image to another with JS trying to avoid CSS so I can practice. The code I wrote changes to the immediate next image but not the following, no matter how many times I click the "next" button.
I copied the entire project CSS to the pen and I can't delete it. I don't think you'll need to check the CSS but if so, the part of the code that has to do with this question starts in line 410, ignore the rest.
For the time being, I just want it to navigate forwards. I'm working with an array but if anyone has a different approach let me know!
Sorry for my English, hope I made myself clear. Anyways, here is my pen so you can see what I am talking about: https://codepen.io/Nulaxz/pen/poroKJg.
Here is the actual function I am using but seems not to work. The last two "console.log" are just for testing purposes.
nextBtn.addEventListener('click', () => {
const result = arr => {
count++;
if (count >= 4) {
count = 0;
};
return `<div class="img-div">
<img src="http://127.0.0.1:5500/img/icon-previous.svg" alt="prev-btn" class="prev-btn">
<img src=${arr[count]} alt="" id="image-1-preview">
<img src="http://127.0.0.1:5500/img/icon-next.svg" alt="next-btn" class="next-btn">
</div>`;
};
imgPreview.innerHTML = result(imgArr);
console.log(count);
console.log(result(imgArr));
});
This project is a challenge from FrontEndMentor, just in case anyone did it in the past and could tell me how he solved it.
The problem is, you're recreating the next button as well. It causes the button element to be removed from the DOM (along with its click event listener) and recreated again. This is why the button doesn't work anymore.
What you could do is, just updating the image src property. like so:
nextBtn.addEventListener('click', () => {
count++;
if (count >= 4) {
count = 0;
};
document.getElementById('image-1-preview').src = arr[count];
});