Changing the color of an element on every click (Vice-Versa)

Question

Hey I am trying to change an elements background color to red when its beige and beige when its red. I've tried using the right if statement but i cant seem to find to solution. I would be super happy if someone helped me! Thanks.

HTML

    <div id="first" class="firstdiv">
        <h2>DenemeTahtası</h2>
        <div>
            <section id="lorem">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis sit dolor, soluta ab illum aperiam
                quam! Eum, delectus aliquam ipsa perspiciatis modi perferendis laudantium aut vel, ut veniam quae
                eligendi?
            </section>
        </div>
    </div>

</body>

</html>
<script src="script.js"></script>

CSS

    .firstdiv{
    background-color: antiquewhite;
    height: 50vh;
    
    h2{
       
        margin-left: 40%;
        padding-top: 20px;

    }

    #lorem{
        margin: 0 auto;
        width: 65%;
        margin-top: 25px;
        text-align: center;
    }
}

JS

    let exp = document.querySelector("#lorem")
    exp.style.backgroundColor = "beige"
    exp.addEventListener("click", colorChange)

    function colorChange() {

        if (exp.style.backgroundColor = "beige") {
            exp.style.backgroundColor = "red"
        }
        else if (exp.style.backgroundColor = "red") {
            exp.style.backgroundColor == "beige"

        }

    }

Answer 1

It's very close to being correct. The thing to watch out for is the amount of equals signs.

• When doing a comparison you should use ==. You can also use === which is the same, but the variable type must also match.
• When doing assignment you should use =.

That means this code:

if (exp.style.backgroundColor = "beige") {
    exp.style.backgroundColor = "red"
} else if (exp.style.backgroundColor = "red") {
    exp.style.backgroundColor == "beige"
}

Needs to be:

if (exp.style.backgroundColor == "beige") {
    exp.style.backgroundColor = "red"
} else if (exp.style.backgroundColor == "red") {
    exp.style.backgroundColor = "beige"
}

The finished result would be:

let exp = document.querySelector("#lorem")
exp.style.backgroundColor = "beige"
exp.addEventListener("click", colorChange)

function colorChange() {
    if (exp.style.backgroundColor == "beige") {
        exp.style.backgroundColor = "red"
    } else if (exp.style.backgroundColor == "red") {
        exp.style.backgroundColor = "beige"
    }
}

.firstdiv {
  background-color: antiquewhite;
  height: 50vh;
}

h2 {
    margin-left: 40%;
    padding-top: 20px;
}

#lorem {
    margin: 0 auto;
    width: 65%;
    margin-top: 25px;
    text-align: center;
}

<div id="first" class="firstdiv">
    <h2>DenemeTahtası</h2>
    <div>
        <section id="lorem">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis sit dolor, soluta ab illum aperiam
            quam! Eum, delectus aliquam ipsa perspiciatis modi perferendis laudantium aut vel, ut veniam quae
            eligendi?
        </section>
    </div>
</div>

The beige/red rectangle is essentially a clickable button, so you may want to add a couple of CSS properties to make that more intuitive to the user. Specifically:

cursor: pointer; /* turn the mouse cursor into a hand */
user-select: none; /* disable selecting of text */

The result of doing that would be:

let exp = document.querySelector("#lorem")
exp.style.backgroundColor = "beige"
exp.addEventListener("click", colorChange)

function colorChange() {
    if (exp.style.backgroundColor == "beige") {
        exp.style.backgroundColor = "red"
    } else if (exp.style.backgroundColor == "red") {
        exp.style.backgroundColor = "beige"
    }
}

.firstdiv {
  background-color: antiquewhite;
  height: 50vh;
}

h2 {
    margin-left: 40%;
    padding-top: 20px;
}

#lorem {
    margin: 0 auto;
    width: 65%;
    margin-top: 25px;
    text-align: center;
    cursor: pointer;
    user-select: none;
}

<div id="first" class="firstdiv">
    <h2>DenemeTahtası</h2>
    <div>
        <section id="lorem">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis sit dolor, soluta ab illum aperiam
            quam! Eum, delectus aliquam ipsa perspiciatis modi perferendis laudantium aut vel, ut veniam quae
            eligendi?
        </section>
    </div>
</div>