如何使按钮在单击时更改背景和文本颜色

Question

我正在尝试创建一个按钮来更改整个页面的背景颜色和一些文本颜色，但我无法使其工作。

背景目前正在工作，但文本不会改变颜色。 我希望“changeText”影响类而不是 Id。

我对 JavaScript 的了解为零，所以很难知道出了什么问题。

这是代码：

 var colors = ["green", "red", "blue"]; var colorIndex = 0; function changeText() { var col = document.getElementsByClassname("textcolor"); if (colorIndex >= colors.length) { colorIndex = 0; } col.body.style.color = colors[colorIndex]; colorIndex++; } var colors = ["red", "blue", "green"]; var colorIndex = 0; function changeBackground() { var col = document.getElementById("bodycolor"); if (colorIndex >= colors.length) { colorIndex = 0; } col.style.backgroundColor = colors[colorIndex]; colorIndex++; }

 <body id='bodycolor'> <h1 class="textcolor">Title Color Change</h1><br> <p class="textcolor">Text Color Change </p><br> <button type="button" onclick="changeBackground();changeText();">Click me</button> </body>

Answer 1

您的背景更改有效，因为 getElementById 仅返回一个您可以在其上设置样式属性的元素。

getElementsByClassName() 然而返回一个项目的集合。 您将不得不对其进行迭代并更改每个元素的样式元素。 尝试这个：

function changeText() {
  var col = document.getElementsByClassName("textcolor");
  if (colorIndex >= colors.length) {
    colorIndex = 0;
  }
for(var i = 0; i < col.length; i++){
  col[i].style.color = colors[colorIndex];
}
  colorIndex++;
}

此外，您不需要 the.body 来设置样式。

Answer 2

getElementsByClassName 返回包含提到的类名的所有元素的数组

尝试

col[0].style.color = colors[colorIndex];

这是适合您的工作示例

访问https://codepen.io/vikas_saini/pen/jOOErNZ

Answer 3

document.getElementsByClassName("textcolor")是一个元素数组。 您需要遍历它们并将colors[colorIndex]处的颜色应用于它们。 这是通过添加 for 循环和将colors[colorIndex]应用于col[i].style.color来实现的，其中i是循环的索引。 col[i]是数组中该索引处的元素。

您还需要将colorIndex的条件移到循环上方，以便在开始应用样式之前调整索引。 如果colorIndex为 3，则需要在开始应用 styles 之前将其更改回 0。

 <body id='bodycolor'> <h1 class="textcolor">Title Color Change</h1><br> <p class="textcolor">Text Color Change </p><br> <button type="button" onclick="changeBackground();changeText();">Click me</button> <script> var colors = ["green", "red", "blue"]; var colorIndex = 0; function changeText() { var col = document.getElementsByClassName ("textcolor"); if( colorIndex >= colors.length ) { colorIndex = 0; } for (var i = 0; i < col.length; i++){ col[i].style.color = colors[colorIndex] } colorIndex++; } var colors = ["red", "blue", "green"]; var colorIndex = 0; function changeBackground() { var col = document.getElementById("bodycolor"); if( colorIndex >= colors.length ) { colorIndex = 0; } col.style.backgroundColor = colors[colorIndex]; colorIndex++; } </script>

Answer 4

你为什么不给它唯一 ID 并检查一下

  let colors = ["green", "red", "blue"];
    let colorIndex = 0;

    function changeBackground() {
      let col = document.getElementById("bodycolor");
      if (colorIndex >= colors.length) {
        colorIndex = 0;
      }
      col.style.backgroundColor = colors[colorIndex];
      colorIndex++;

       let h1Color = document.getElementById("h1Color")
       let pColor = document.getElementById("pColor");

      if (colorIndex >= colors.length) {
        colorIndex = 0;
      }
      h1Color.style.color = colors[colorIndex];
      pColor.style.color = colors[colorIndex];
     colorIndex++;
    }

 <body id='bodycolor'>
      <h1 id="h1Color">Title Color Change</h1><br>
      <p id="pColor">Text Color Change </p><br>
      <button type="button" onclick="changeBackground()">Click me</button>
    </body>

如何使按钮在单击时更改背景和文本颜色

问题描述

4 个解决方案

解决方案1
4 已采纳 2019-10-07 14:53:58

解决方案2
0 2019-10-07 14:59:43

解决方案3
0 2019-10-07 15:01:06

解决方案4
0 2019-10-07 15:16:03

如何使按钮在单击时更改背景和文本颜色

问题描述

4 个解决方案

解决方案1 4 已采纳 2019-10-07 14:53:58

解决方案2 0 2019-10-07 14:59:43

解决方案3 0 2019-10-07 15:01:06

解决方案4 0 2019-10-07 15:16:03

解决方案1
4 已采纳 2019-10-07 14:53:58

解决方案2
0 2019-10-07 14:59:43

解决方案3
0 2019-10-07 15:01:06

解决方案4
0 2019-10-07 15:16:03