i try to créate a javascript class for zoom in and zoom out some pictures. But all pictures of the page zoom in and zoom out. I think it's a javascript loop's problem but i cant do it. This is my Class , someone see the problem ?
class Image {
constructor() {
this.ip = document.getElementsByClassName("image_petite");
this.images = [];
}
agrandir() {
for (let i=0; i < this.ip.length; i++) {
this.images.push(this.ip[i]);
};
console.log(this.images);
for (let j=0; j < this.images.length; j++) {
if (this.images[j].classList == "image_petite") {
this.images[j].classList.remove('image_petite');
this.images[j].classList.add('image_grande');
} else if (this.images[j].classList == "image_grande") {
this.images[j].classList.remove('image_grande');
this.images[j].classList.add('image_petite');
}
}
}
}
let image = new Image();
this.images[j].classList == "image_petite" isn't how you check to see if an element has a class. Instead, you use contains:
if (this.images[j].classList.contains("image_petite")) {
// ...
}
Separately, though, you've used a loop, which intentionally processes everything in the this.images array. It's hard to say what you should do instead without knowing what the DOM structure (loosely, the HTML) looks like, but if you're trying to handle resizing one image, you'll need to identify the image you want to resize, which nothing in that code does.
Here's a simple example using a click handler:
// This example uses event delegation
document.body.addEventListener("click", event => {
const image = event.target.closest("img");
if (image && event.currentTarget.contains(image)) {
// This is the image to enlarge or toggle
if (image.classList.contains("image_grand")) {
// Toggling it from big back to small
image.classList.remove("image_grand");
image.classList.add("image_petite");
} else {
// Making this the one big one
const big = document.querySelector(".image_grand");
if (big) {
// Make the current big one small again
big.classList.remove("image_grand");
big.classList.add("image_petite");
}
// Make this one big
image.classList.add("image_grand");
image.classList.remove("image_petite");
}
}
});.image_petite {
width: 75px;
height: 75px;
}
.image_grand {
width: 150px;
height: 150px;
}<div>
<img class="image_petite" src="https://via.placeholder.com/150/0000FF/808080 ?text=1">
</div>
<div>
<img class="image_petite" src="https://via.placeholder.com/150/0000FF/808080 ?text=2">
</div>
<div>
<img class="image_petite" src="https://via.placeholder.com/150/0000FF/808080 ?text=3">
</div>That said, I think I'd use just a single class and add/remove that class, rather than two classes.