1. 首页
  2. 问题列表
  3. HTML/CSS/JS在单击时更改多个按钮的颜色
提问者：小点点

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


null

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>

null

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

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


共1个答案

匿名用户

null

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>

相关问题