CODEWITHSUNDEEP
javascript
Pol Vunak
Pol Vunak

Reputation: 11

javascript picture zoom in and zoom out

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();

Upvotes: 1

Views: 149

Answers (1)

T.J. Crowder
T.J. Crowder

Reputation: 1073968

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.

Upvotes: 3

Related Questions