通过javascript更改背景颜色（onclick）不起作用答案

【问题标题】：background-color changing(onclick) via javascript not working通过javascript更改背景颜色（onclick）不起作用
【发布时间】：2020-10-25 04:18:05
【问题描述】：

我试图在 javascript 中编写一个改变背景的效果，点击按钮会改变背景颜色。问题是我应该使用一组颜色作为背景颜色。在每次单击时，按钮应使颜色循环通过数组。这是下面的代码：-

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>background-changer</title>
</head>
<body>
<style>
    body{
        display: flex;
        justify-content: center;
        align-items: center;
    }
    button{
        color: white;
        background-color: black;
        font-weight: 400;
        font-family: sans-serif;
        font-size: 28px;
        border: 0;
        border-radius: 5px;
        padding: 1rem 2rem;
    }
    button:hover{
        background-color: rgba(0, 0, 0, 0.8);
    }
</style>
<button onclick="ChangeBackground()">CHANGE COLOR</button>

<script>
    const btn = document.querySelector('button');
    var backgrounds = ['red', 'royalblue', 'green', 'purple', 'yellow'];

    function ChangeBackground(){
        backgrounds.forEach(strtChng);
    }

    function strtChng(){
        let i=0;
        if(i<=backgrounds.length){
            i++;
            document.body.style.backgroundColor = backgrounds[i];
            console.log(backgrounds[i]);
        }
        else{
            i=0;
        }
    }
            
   
</script>
</body>
</html>

【问题讨论】：

点击一次时，控制台还会显示 ROYALBLUE 循环 5 次。
"not working" 不是有用的错误/问题描述。发生什么了？相反应该发生什么？控制台有错误吗？
“<style> 元素必须包含在文档的<head> 中。” (MDN)
backgrounds.forEach(strtChng) 没有意义
您想每次点击更改一次颜色吗？

标签： javascript html dom background-color

【解决方案1】：

你循环遍历元素两次，而没有必要

    const btn = document.querySelector('button');
    var backgrounds = ['red', 'royalblue', 'green', 'purple', 'yellow'];
    let i = 0;
    function ChangeBackground(){
            document.body.style.backgroundColor = backgrounds[i];
            (i > backgrounds.length-2) ? i = 0 : i++
    }

  body{
        display: flex;
        justify-content: center;
        align-items: center;
    }
    button{
        color: white;
        background-color: black;
        font-weight: 400;
        font-family: sans-serif;
        font-size: 28px;
        border: 0;
        border-radius: 5px;
        padding: 1rem 2rem;
    }
    button:hover{
        background-color: rgba(0, 0, 0, 0.8);
    }

<html lang="en">

<body>

    <button onclick="ChangeBackground()">CHANGE COLOR</button>

</body>

【讨论】：

【解决方案2】：

我对您的代码进行了一些更改。

看看sn-p。

const btn = document.querySelector('button');
    var backgrounds = ['red', 'royalblue', 'green', 'purple', 'yellow'];
    var count = 0;

    function ChangeBackground(){

          if(count<=backgrounds.length){
            count++;
          }else {
             count=0;
          }
      
        strtChng(count);
   
    }



    function strtChng(i){
      document.body.style.backgroundColor = backgrounds[i];
      console.log(backgrounds[i]);
    }

body{
        display: flex;
        justify-content: center;
        align-items: center;
    }
    button{
        color: white;
        background-color: black;
        font-weight: 400;
        font-family: sans-serif;
        font-size: 28px;
        border: 0;
        border-radius: 5px;
        padding: 1rem 2rem;
    }
    button:hover{
        background-color: rgba(0, 0, 0, 0.8);
    }

    &lt;button onclick="ChangeBackground()"&gt;CHANGE COLOR&lt;/button&gt;

【讨论】：

【解决方案3】：

使用addEventListener 和modulo (%) 的较短版本

let backgrounds = ['red', 'royalblue', 'green', 'purple', 'yellow'], i = 0
document.querySelector('button').addEventListener('click', () => {
  document.body.style.backgroundColor = backgrounds[i%backgrounds.length]
  i++
})

body {
  display: flex;
  justify-content: center;
  align-items: center;
}

button {
  color: white;
  background-color: black;
  font-weight: 400;
  font-family: sans-serif;
  font-size: 28px;
  border: 0;
  border-radius: 5px;
  padding: 1rem 2rem;
}

button:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

&lt;button&gt;CHANGE COLOR&lt;/button&gt;

【讨论】：

您能解释一下这里的模数是如何计算的吗？我尝试了之前给出的方法，但我必须单击两次才能重复循环。在此先感谢。:)
好吧modulo 工作正常，也许可以查找文档。至于单击两次，不确定但可能与您在每次单击时循环遍历背景数组的事实有关
可能。不管怎么说，多谢拉。感谢您的帮助。