html按钮点击改变颜色代码,HTML/CSS/JS在单击时更改多个按钮的颜色

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

}

Cat Dominates World

div {

background-color: none;

border: 0.5px solid black;

text-align: center;

display: inline-block;

cursor: pointer;

padding: 4px 24px;

}

Cat Dominates World

null

你好！ 我现在正在使用HTML/CSS制作5级条，并尝试改变多个按钮的颜色。 例如，单击第三个按钮，第一个/第二个/第三个按钮的颜色将更改为红色。 我从对方的回答中修复了，然而，由于Chrome扩展策略，内联实现是不允许的。 我制作了另一个js文件来运行代码，但它不起作用。

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