每次点击更改元素的颜色（反之亦然）

Question

嘿，我正在尝试将元素的背景颜色更改为米色时的红色和红色时的米色。我试过使用正确的 if 语句，但我似乎无法找到解决方案。如果有人帮助我，我会非常高兴！谢谢

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

非常接近正确。需要注意的是等号的数量。

进行比较时，您应该使用 ==。也可以用===，也是一样，但是变量类型也要匹配。
做作业时你应该使用=。

这意味着这个代码：

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

需要：

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

最终结果为：

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>

beige/red 矩形本质上是一个可单击的按钮，因此您可能需要添加几个 CSS 属性，使用户更直观。具体来说：

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

这样做的结果是：

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>

Answer 2

您尝试做的是正确的，但您有一些错误导致它无法正常工作。

在CSS中：

关闭 .firstDiv 的大括号在 JS 中：
在两个 if 语句的条件中使用标识运算符 (===) if (exp.style.backgroundColor === "beige")
在 if 的主体中使用赋值运算符来分配新值 exp.style.backgroundColor == "beige"

每次点击更改元素的颜色（反之亦然）

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

javascript

if-statement

function

event-listener

styling