单击时 HTML/CSS/JS 更改多个按钮的颜色答案

【问题标题】：HTML/CSS/JS change color of multiple buttons when clicked单击时 HTML/CSS/JS 更改多个按钮的颜色
【发布时间】：2020-07-23 14:01:23
【问题描述】：

var level1 = document.getElementById("bar1");
var level2 = document.getElementById("bar2");
var level3 = document.getElementById("bar3");
var level4 = document.getElementById("bar4");
var level5 = document.getElementById("bar5");
var red = '#000000';
var white = '#FFFFFF';

document.addEventListner('DOMContentLoaded',function() {
    level1.addEventListner('click', function() {
        changeColor1();
    });
});

document.addEventListner('DOMContentLoaded',function() {
    level2.addEventListner('click', function() {
        changeColor2();
    });
});

document.addEventListner('DOMContentLoaded',function() {
    level3.addEventListner('click', function() {
        changeColor3();
    });
});

document.addEventListner('DOMContentLoaded',function() {
    level4.addEventListner('click', function() {
        changeColor4();
    });
});

document.addEventListner('DOMContentLoaded',function() {
    level5.addEventListner('click', function() {
        changeColor5();
    });
});

function changeColor1(){
    level1.style.backgroundColor = red;
    level2.style.backgroundColor = white;
    level3.style.backgroundColor = white;
    level4.style.backgroundColor = white;
    level5.style.backgroundColor = white;
}

function changeColor2(){
    level1.style.backgroundColor = red;
    level2.style.backgroundColor = red;
    level3.style.backgroundColor = white;
    level4.style.backgroundColor = white;
    level5.style.backgroundColor = white;
}

function changeColor3(){
    level1.style.backgroundColor = red;
    level2.style.backgroundColor = red;
    level3.style.backgroundColor = red;
    level4.style.backgroundColor = white;
    level5.style.backgroundColor = white;
}

function changeColor4(){
    level1.style.backgroundColor = red;
    level2.style.backgroundColor = red;
    level3.style.backgroundColor = red;
    level4.style.backgroundColor = red;
    level5.style.backgroundColor = white;
}

function changeColor5(){
    level1.style.backgroundColor = red;
    level2.style.backgroundColor = red;
    level3.style.backgroundColor = red;
    level4.style.backgroundColor = red;
    level5.style.backgroundColor = red;
}

h1 {
 color: black;
}

p {
 color: black;
}

body {
    width: 300px;
    height: 300px;
}

    <!doctype html>
    <html>
    <head>
        <title>Cat Dominates World</title>
        <script src="popup.js"></script>
        <link rel="stylesheet" href="popup.css"/>
        <style>
        div {
            background-color: none;
            border: 0.5px solid black;
            text-align: center;
            display: inline-block;
            cursor: pointer;
            padding: 4px 24px;
        }
        </style>
    </head>
    <body>
        <header>
            <h3>Cat Dominates World</h3>
        <header>

        <div id="bar1"></div>
        <div id="bar2"></div>
        <div id="bar3"></div>
        <div id="bar4"></div>
        <div id="bar5"></div>

    </body>
    </html>

你好！我现在正在使用 HTML/CSS 制作 5 级栏，并尝试更改多个按钮的颜色。例如，单击第三个按钮，第一个/第二个/第三个按钮的颜色变为红色。我从其他人的答案中修复了，但是，由于 Chrome 扩展策略，不允许内联实现。我又做了一个js文件来运行代码，结果不行。

代码有问题吗？请给我反馈:)

【问题讨论】：

你可以只在div中调用onclick函数而不是使用eventListeners。你可以参考这个。 codepen.io/hemu2253/pen/vYLPNLb?editors=1111
你每次都写addEventListner而不是addEventListener。

标签： javascript html css frontend

【解决方案1】：

var level1 = document.getElementById("bar1");
var level2 = document.getElementById("bar2");
var level3 = document.getElementById("bar3");
var level4 = document.getElementById("bar4");
var level5 = document.getElementById("bar5");
var red = '#000000';
var white = '#FFFFFF';




function changeColor1(){
    level1.style.backgroundColor = red;
    level2.style.backgroundColor = white;
    level3.style.backgroundColor = white;
    level4.style.backgroundColor = white;
    level5.style.backgroundColor = white;
}

function changeColor2(){
    level1.style.backgroundColor = red;
    level2.style.backgroundColor = red;
    level3.style.backgroundColor = white;
    level4.style.backgroundColor = white;
    level5.style.backgroundColor = white;
}

function changeColor3(){
    level1.style.backgroundColor = red;
    level2.style.backgroundColor = red;
    level3.style.backgroundColor = red;
    level4.style.backgroundColor = white;
    level5.style.backgroundColor = white;
}

function changeColor4(){
    level1.style.backgroundColor = red;
    level2.style.backgroundColor = red;
    level3.style.backgroundColor = red;
    level4.style.backgroundColor = red;
    level5.style.backgroundColor = white;
}

function changeColor5(){
    level1.style.backgroundColor = red;
    level2.style.backgroundColor = red;
    level3.style.backgroundColor = red;
    level4.style.backgroundColor = red;
    level5.style.backgroundColor = red;
}

level1.addEventListener("click",function(){
    changeColor1();
})



level2.addEventListener("click",function(){
    changeColor2()
})

level3.addEventListener("click",function(){
    changeColor3()
})
level4.addEventListener("click",function(){
    changeColor4()
})

level5.addEventListener("click",function(){
    changeColor5()
})

h1 {
  color: black;
 }
 
 p {
  color: black;
 }
 
 body {
     width: 300px;
     height: 300px;
 }

<!doctype html>
<html>
<head>
    <title>Cat Dominates World</title>
    <link rel="stylesheet" href="popup.css"/>
    <style>
    div {
        background-color: none;
        border: 0.5px solid black;
        text-align: center;
        display: inline-block;
        cursor: pointer;
        padding: 4px 24px;
    }
    </style>
</head>
<body>
    <header>
        <h3>Cat Dominates World</h3>
    <header>

    <div id="bar1"></div>
    <div id="bar2"></div>
    <div id="bar3"></div>
    <div id="bar4"></div>
    <div id="bar5"></div>
    <script src="popup.js"></script>
</body>
</html>

你有语法错误，正确的形式是 addEventListener() 而不是你写的 addEventListner()

【讨论】：