Question

我已经包含了我的HTML和CSS代码。我插入了一些JavaScript，以使我的网页具有交互性。有人可以告诉我为什么我的代码不允许我为背景获取随机颜色吗？我还希望当用户单击“获取新颜色”按钮时，十六进制代码进行更新以匹配我的随机背景颜色。

我已将javascript添加到我的html文档中，以尝试随机颜色。

代码：

body {
  margin: 0;
  padding: 0;
  background: #e74c3c;
  font-family: lato;
}

.color {
  margin-top: 300px;
  text-align: center;
}

#hex {
  display: block;
  color: white;
  font-size: 40px;
  text-transform: uppercase;
  margin: 15px;
}

.color button {
  background: none;
  outline: none;
  color: white;
  border: 2.5px solid white;
  cursor: pointer;
  font-size: 22px;
}

<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title> Random Colors </title>
  <link href="taniaWebsite2.css" type="text/css" rel="Stylesheet" />
  <script>
    alert("Yo Aliens, Click OK to see random colours");
  </script>
</head>

<body>
  <div class="color">
    <span id="hex">#e74c3c</span>
    <button onclick="getNewColor()"> Get New Color</button>
  </div>

  <script type="text/javascript">
    function getNewColor() {
      var symbols, color;
      symbols = "0123456789ABCDEF";
      color = "#";

      for (var i = 0; i < 6; i++) {
        color = color + symbols[Math.floor(Math.random() * 16)];
      }

      document.body.taniasWebsite.background = color;
      }
  </script>

</body>

</html>

Answer 1

您非常接近-只需进行一些细微更改即可使此工作正常。首先，要更新页面body的背景样式，请修改以下内容：

    /* document.body.taniaWebsite2.background=color; <-- Remove this */
    document.body.style.background=color; /* Use this */

这就是说“更改主体元素样式的背景” 。

需要进行的另一项更改是在}函数的末尾添加缺少的getNewColor()（请参见下面的代码片段中的注释）。希望这会有所帮助！

body {
  margin: 0;
  padding: 0;
  background: #e74c3c;
  font-family: lato;
}

.color {
  margin-top: 300px;
  text-align: center;
}

#hex {
  display: block;
  color: white;
  font-size: 40px;
  text-transform: uppercase;
  margin: 15px;
}

.color button {
  background: none;
  outline: none;
  color: white;
  border: 2.5px solid white;
  cursor: pointer;
  font-size: 22px;
}

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title> Random Colors </title>
  <link href="taniaWebsite2.css" type="text/css" rel="Stylesheet" />
  <script>
    alert("Yo Aliens, Click OK to see random colours");
  </script>
</head>

<body>
  <div class="color">
    <span id="hex">#e74c3c</span>
    <button onclick="getNewColor()"> Get New Color</button>
  </div>
  <script type="text/javascript">
    function getNewColor() {
      var symbols, color;
      symbols = "0123456789ABCDEF";
      color = "#";

      for (var i = 0; i < 6; i++) {
        color = color + symbols[Math.floor(Math.random() * 16)];
      }

      document.body.style.background = color; /* Update this */
      
      /* Add this to update text to match new background color */
      document.getElementById('hex').innerText = color;
    } /* Add this */
  </script>
</body>
</html>

更新

此外，要更新文本以使其与背景色匹配，您可以将其添加到getNewColor()函数的末尾：

  /* Add this to update text to match new background color */
  document.getElementById('hex').innerText = color;

为什么单击按钮后文档的颜色没有改变？

1 个答案:

更新