时间戳

首页 > 解决方案 > 为什么我的更改背景颜色的功能运行（警报有效），但不更改颜色？

javascript - 为什么我的更改背景颜色的功能运行（警报有效），但不更改颜色？

问题描述

目前正在学习Javascript，完全新手。尝试编写一个函数，当单击按钮时，将<body>元素的背景颜色从白色切换为紫色，反之亦然。

警报正在运行，因此该功能正在运行，但颜色永远不会改变。

完全不知道发生了什么...

HTML：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
  <title>My Title</title>

</head>
<body>>
  <button>Click me!</button>

  <h1>I am an h1!</h1>
    <p id="first" class="special">Hello</p>
    <p class="special">Goodbye</p>
    <p>Hi Again</p>
  <p id="last">Goodbye Again</p>
  

  <!-- SCRIPS -->
  <script type="text/javascript" src="exercises.js"></script>
</body>
</html>

JavaScript：

var color_button = document.querySelector("button");
var is_purple = false;

color_button.addEventListener("click", function() {
    alert("clicked");
    if (is_purple = false) {
        document.querySelector("body").style.backgroundColor = "purple";
        is_purple = true;
    }
    else {
        document.querySelector("body").style.backgroundColor = "white";
        is_purple = false;
    }
});

标签： javascripthtmlecmascript-6dom-eventsecmascript-5

解决方案

您的问题是您在比较器中使用了单个等号。单等号用于为变量赋值，而不是用于比较。

color_button.addEventListener("click", function() {
    alert("clicked");
//what you had
//    if (is_purple = false) {
//what it should be
      if (is_purple === false) {
        document.querySelector("body").style.backgroundColor = "purple";
        is_purple = true;
    }
    else {
        document.querySelector("body").style.backgroundColor = "white";
        is_purple = false;
    }
});

推荐阅读