I am struggling to change the color of my button on selection using Javascript. I have tried various methods such as adding ".active", ":active" and even using "!important", but nothing seems to work. The desired color for the button is #E68352. Below is the CSS code for the button:
.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>