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

Question

我试图在 javascript 中编写背景更改效果，单击按钮将更改背景颜色。问题是我应该使用 colors 数组，这将是背景颜色。 在每次单击按钮时，应将 colors 循环通过阵列。 这是下面的代码： -

<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>

Answer 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>

Answer 2

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

看看片段。

 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); }

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

Answer 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); }

 <button>CHANGE COLOR</button>

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

问题描述

3 个解决方案

解决方案1
0 2020-07-04 17:39:36

解决方案2
0 2020-07-04 17:53:04

解决方案3
0 已采纳 2020-07-04 17:57:43

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

问题描述

3 个解决方案

解决方案1 0 2020-07-04 17:39:36

解决方案2 0 2020-07-04 17:53:04

解决方案3 0 已采纳 2020-07-04 17:57:43

解决方案1
0 2020-07-04 17:39:36

解决方案2
0 2020-07-04 17:53:04

解决方案3
0 已采纳 2020-07-04 17:57:43