JS click event listener only works once and not with the expected if statement
Question
I'm using a library for comparing different photos, like a "before and after" sort of thing, where they're displayed one on top of the other and there's a button in the center that you can drag left or right to see the differences.
Now, what I'm trying to do is implement two buttons - one on the left of the picture and one on the right. When you click these buttons, I want the photos to change with the previous two or the next two.
I made an if statement for the buttons, but they don't work properly, although I don't notice any obvious error.
HTML code
<div id="wrapper">
<div class="arrowsContainer">
<div id="leftArrow">
<p>Left</p>
</div>
</div>
<div class="cd-image-container">
<img src="" id="originalImage" alt="Original Image">
<div class="cd-resize-img">
<img src="" id="modifiedImage" alt="Modified Image">
</div>
<span class="cd-handle"></span>
</div>
<div class="arrowsContainer">
<div id="rightArrow">
<p>Right</p>
</div>
</div>
</div>
JavaScript code
let originalImage = document.querySelector('#originalImage');
let modifiedImage = document.querySelector('#modifiedImage');
document.querySelector('#leftArrow').addEventListener("click", function(){
if ((modifiedImage.src = "img/3.jpg") && (originalImage.src = "img/4.jpg")){
modifiedImage.src = "img/1.jpg";
originalImage.src = "img/2.jpg";
}
});
document.querySelector('#rightArrow').addEventListener('click', function(){
if ((modifiedImage.src = "img/1.jpg") && (originalImage.src = "img/2.jpg")){
modifiedImage.src = "img/3.jpg";
originalImage.src = "img/4.jpg";
}
if ((modifiedImage.src = "img/3.jpg") && (originalImage.src = "img/4.jpg")){
modifiedImage.src = "img/5.jpg";
originalImage.src = "img/6.jpg";
}
if ((modifiedImage.src = "img/5.jpg") && (originalImage.src = "img/6.jpg")){
modifiedImage.src = "img/7.jpg";
originalImage.src = "img/8.jpg";
}
});
Right now, if I open the page, photos 1 & 2 are shown. If I click on the "right" button, it will display pics 7 & 8, and from there, if I click on the "left" button it will display pics 1 & 2 again, although the condition I have on the "left" button doesn't even include the scenario where you're at pics 7 & 8.
Please help, I really don't understand what's happening
2 answers
solution1
1 ACCPTED 2020-03-29 15:36:03
I think what you are trying to achieve is that, when you click on the right button you want to show the next two images and when you click on the prev button you want to show the previous two images. If that's the case then you can check my solution.
Here is the js file.
let originalImage = document.querySelector("#originalImage");
let modifiedImage = document.querySelector("#modifiedImage");
const totalImages = 8;
let currentCount = 0;
document.querySelector("#leftArrow").addEventListener("click", function() {
currentCount = (currentCount - 2 + totalImages) % totalImages;
originalImage.src = `./img/${currentCount + 1}.jpg`;
modifiedImage.src = `./img/${currentCount + 2}.jpg`;
});
document.querySelector("#rightArrow").addEventListener("click", function() {
currentCount = (currentCount + 2) % totalImages;
originalImage.src = `./img/${currentCount + 1}.jpg`;
modifiedImage.src = `./img/${currentCount + 2}.jpg`;
});
And here is the .html file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<!-- <div class="container">Item</div> -->
<div id="wrapper">
<div class="arrowsContainer">
<div id="leftArrow">
<p>Left</p>
</div>
</div>
<div class="cd-image-container">
<img src="./img/1.jpg" id="originalImage" alt="Original Image" />
<div class="cd-resize-img">
<img src="./img/2.jpg" id="modifiedImage" alt="Modified Image" />
</div>
<span class="cd-handle"></span>
</div>
<div class="arrowsContainer">
<div id="rightArrow">
<p>Right</p>
</div>
</div>
</div>
<script src="main.js"></script>
</body>
</html>
let originalImage = document.querySelector("#originalImage"); let modifiedImage = document.querySelector("#modifiedImage"); const totalImages = 8; let currentCount = 0; document.querySelector("#leftArrow").addEventListener("click", function() { currentCount = (currentCount - 2 + totalImages) % totalImages; originalImage.src = `https://i.picsum.photos/id/${currentCount + 1}/200/300.jpg`; modifiedImage.src = `https://i.picsum.photos/id/${currentCount + 2}/200/300.jpg`; }); document.querySelector("#rightArrow").addEventListener("click", function() { currentCount = (currentCount + 2) % totalImages; originalImage.src = `https://i.picsum.photos/id/${currentCount + 1}/200/300.jpg`; modifiedImage.src = `https://i.picsum.photos/id/${currentCount + 2}/200/300.jpg`; });
#wrapper { display: flex; } .cd-image-container { display: flex; } #leftArrow, #rightArrow { cursor: pointer; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Document</title> <link rel="stylesheet" href="style.css" /> </head> <body> <!-- <div class="container">Item</div> --> <div id="wrapper"> <div class="arrowsContainer"> <div id="leftArrow"> <p>Left</p> </div> </div> <div class="cd-image-container"> <img src="https://i.picsum.photos/id/1/200/300.jpg" id="originalImage" alt="Original Image" /> <div class="cd-resize-img"> <img src="https://i.picsum.photos/id/2/200/300.jpg" id="modifiedImage" alt="Modified Image" /> </div> <span class="cd-handle"></span> </div> <div class="arrowsContainer"> <div id="rightArrow"> <p>Right</p> </div> </div> </div> <script src="main.js"></script> </body> </html>
solution2
0 2020-03-29 15:40:08
Use == or === in if statement
Give this a shot
if ((modifiedImage.src == "img/1.jpg") && (originalImage.src == "img/2.jpg")){
modifiedImage.src = "img/3.jpg";
originalImage.src = "img/4.jpg";here
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.