我想让我的按钮改变颜色。目前，当我选择它时，什么也没有发生。我使用javascript来改变按钮的颜色。我已经添加了我的javascript和CSS代码的更多信息。我想把按钮的颜色改为#E68352。我尝试过各种方法，比如使用".active";;甚至还加上了"重要"。但不幸的是，什么都不起作用
.booking-container-section {
width: 100%;
margin-top: 20px;
border: 1px solid rgba(255, 255, 255, .5);
}
.booking-container-area {
margin: auto;
height: 350px;
}
.btn {
background-color: #423F3E;
height: 30px;
width: 30px;
margin: 5px;
border-radius: 10px;
border: none;
float: left;
}
.btn:active {
background-color: #E68352 !important;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="try3.css">
<script type="text/javascript" src="booking.js"></script>
</head>
<body>
<div class="container">
<div class="content-container">
<div class="specific-movie-content">
<div class="specific-movie-img">
</div>
<div class="specific-movie-desc">
<h1 class="specific-movie-title"></h1>
<p class="specific-movie-para"></p>
</div>
</div>
<div class="booking-container">
<div class="booking-container-section">
<h1 class="booking-seats-font">SEATS</h1>
<div class="booking-container-area">
<div class="box">
<p class="screen-font">SCREEN</p>
</div>
<div class="seats-layout">
<input type="button" id="button1" class="btn" />
<input type="button" id="button2" class="btn" />
<input type="button" id="button3" class="btn" />
</div>
<p>
You have selected <span id="display">0</span> seats</p>
<!--script src="booking.js"></script-->
<script>
var buttons = document.getElementsByClassName("button");
var count = 0;
var disp = document.getElementById("display");
for (let i = 0, l = buttons.length; i < l; i++) {
buttons[i].addEventListener('click', function() {
buttons[i].classList.toggle('active');
if (this.classList.contains("active")) {
count++;
} else {
count--;
}
disp.innerHTML = count;
})
}
</script>
</div>
</div>
</div>
</div>
</div>
</body>
</html>下面是代码，让按钮活动它需要添加button:focus not only:active
var buttons = document.querySelectorAll(".btn");
buttons.forEach(function(el) {
el.addEventListener("click", function() {
el.classList.toggle("active");
});
});.booking-container-section{
width: 100%;
margin-top: 20px;
border: 1px solid rgba(255,255,255,.5);
}
.booking-container-area{
margin: auto;
height: 350px;
}
.btn {
background-color: #423F3E;
height: 30px;
width: 30px;
margin: 5px;
border-radius: 10px;
border: none;
float: left;
}
.btn.active {
background-color: #E68352 !important;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="try3.css">
<script type = "text/javascript" src = "booking.js" ></script>
</head>
<body>
<div class="container">
<div class="content-container">
<div class="specific-movie-content">
<div class="specific-movie-img">
</div>
<div class="specific-movie-desc">
<h1 class="specific-movie-title"></h1>
<p class="specific-movie-para"></p>
</div>
</div>
<div class="booking-container">
<div class="booking-container-section">
<h1 class="booking-seats-font">SEATS</h1>
<div class="booking-container-area">
<div class="box"><p class="screen-font">SCREEN</p></div>
<div class="seats-layout">
<input type="button" id="button1" class="btn" />
<input type="button" id="button2" class="btn" />
<input type="button" id="button3" class="btn" />
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>