How to switch size using one function

Question

My learning of JavaScript is full of pitfalls and I don't really understand the logic of my exo. I want to use document.querySelectorAll to change the size of my rectangles to "large" with the same function I used before (function reDisplay() { ... }) with a variable let rectsAreBig = true.

I have to use a variable that will represent the "current state of the page".
To do this I must use custom variables (which I will use to represent the "state" of the rectangles):
I need to call the function reDisplay();

My style is


.rect {
    background: red;
    width: 250px;
    height: 250px;
    margin: 10px;
    float: left;
}

.rect.blue {
    background: blue;
}

.rect.yellow {
    background: yellow;
}

.rect.green {
    background: green;
}

.smallRect {
    width: 150px;
    height: 150px;
    margin: 10px;
}

HTML:

My first rectangle should change colour with document.querySelector and my code is this and it works even if I am not sure if I do follow the recommendations.

let stateRect1Color = "blue";

let rectsAreBig = true;


let rectContainer = document.querySelector(".rect"); 
console.log(rectContainer);

rectContainer.addEventListener("click", function reDisplay() {
    for (let couleurs = 0; couleurs < 5; couleurs++) {
        console.log(couleurs);
        let lePremierRectangle = document.querySelector("#rect1"); 
        switch (stateRect1Color) {
            case "blue": 
                stateRect1Color = "red"; 
                // document
                //     .querySelector("#rect1")
                lePremierRectangle.classList.remove("blue"); 
                // document
                //     .querySelector("#rect1")
                lePremierRectangle.classList.add("red"); 
                break;
            case "red":
                stateRect1Color = "yellow"; 
                // document
                //     .querySelector("#rect1")
                lePremierRectangle.classList.remove("red"); 
                // document
                //     .querySelector("#rect1")
                lePremierRectangle.classList.add("yellow");
                break;
            case "yellow": 
                stateRect1Color = "green";
                // document
                //     .querySelector("#rect1")
                lePremierRectangle.classList.remove("yellow"); 
                // document
                //     .querySelector("#rect1")
                lePremierRectangle.classList.add("green"); 
                break;
            case "green":
                stateRect1Color = "blue"; 
                // document
                //     .querySelector("#rect1")
                lePremierRectangle.classList.remove("green"); 
                // document
                //     .querySelector("#rect1")
                lePremierRectangle.classList.add("blue");
                break;
            default:
                console.log();
        }

        console.log(stateRect1Color); 
    }

and my second rectangle code doesn't work to change the shape

let rectContainer2 = document.querySelectorAll(".rect"); 

rectContainer2.addEventListener("click", function reDisplay() {
    
    let leDeuxiemeRectangle = document.querySelector("#rect2"); 

    

    for (let i = 0; i < TousLesRectangles.length; i++) {
        
        if (rectsAreBig == true) {
            console.log((rectsAreBig = true)); 
            
            rectsAreBig = false; /
            // On récupère le rectangle 2
            leDeuxiemeRectangle.classList.remove(".smallRect");
            console.log(smallRect); 

            leDeuxiemeRectangle.classList.add(".smallRect"); 
            console.log(); // On affiche la valeur de la variable rectsAreBig dans la console
        } else {
            rectsAreBig = true;

            leDeuxiemeRectangle.classList.remove(".smallRect"); 

            leDeuxiemeRectangle.classList.add(".smallRect"); 
            console.log();rectsAreBig dans la console
        }
        console.log(rectsAreBig);
    }
});

user_5778275 · Answer

What if you made it like an singleton (=object literal) handler object (or some other object/class structure).

I'll give my 2 cents. Here is a quick plain js example (could be much better):

First set the clicks to bind into the handler method on init/pageload etc. It has also the rectsAreBig in memory. So if you call "rectChanger.rectsAreBig = false" and click the rectangles after that, it should then change the clicked rectangle to smallRect-class and change the color (i copy pasted your code there with minor change that it wont break). We simply pass the element from the click to the handler and it refreshes the class values on each click.

document.querySelectorAll('.rect').forEach(
(el) => el.addEventListener('click', (event)=> 
rectChanger.changeColorAndSize(event.target)));

var rectChanger = {
rectsAreBig: true,
rectClassName: "rect",
rectSizes: {
    large: "normalRect",
    small: "smallRect"
},
rectColorClasses: ["red", "blue", "green", "yellow"],

changeColorAndSize: function(elementClicked){
        this.changeSize(elementClicked);
        this.changeColor(elementClicked);
},

changeColor: function(elementClicked){
    var color = this.rectColorClasses.filter((color) => {
        if(elementClicked.classList.contains(color)){
            return color;
        }
    });
    console.log(color);
    if(color.length > 0){

    switch (color[0]) {
        case "blue": 
            elementClicked.classList.remove("blue"); 
            elementClicked.classList.add("red"); 
            break;
        case "red":
            elementClicked.classList.remove("red"); 
            elementClicked.classList.add("yellow");
            break;
        case "yellow": 
            elementClicked.classList.remove("yellow"); 
            elementClicked.classList.add("green"); 
            break;
        case "green":
            elementClicked.classList.remove("green"); 
            elementClicked.classList.add("blue");
            break;
        default:
            console.log('no color found' + elementClicked.id);
    }
  }
},
changeSize: function(elementClicked){
    if(this.rectsAreBig){
        elementClicked.classList.add(this.rectSizes.large);
        elementClicked.classList.remove(this.rectSizes.small);
    }
    else {
        elementClicked.classList.add(this.rectSizes.large);
        elementClicked.classList.remove(this.rectSizes.small);
    }
}
}

How to switch size using one function

1 Answers