I am attempting to simulate radio button behavior using normal buttons for a quiz application. Currently, my code is working as intended and permanently highlights buttons with the desired color. However, I want all other buttons in a question to be white, and only the selected one should display the desired color. This is what I am attempting to achieve:
var count = 1;
function setColor(btn, color) {
var property = document.getElementById(btn);
if (count == 0) {
property.style.backgroundColor = color;
count = 1;
} else {
property.style.backgroundColor = color;
count = 0;
}
}.button {
border: 2px solid black;
padding: 16px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 5vw;
margin: 4px 2px;
transition-duration: 0.4s;
cursor: pointer;
width: 100%;
}
.div1 {
width: 95vw;
border-radius: 20px;
background-color: #ddd;
padding: 30px;
margin: 0 auto;
}
.card {
/* Add shadows to create the "card" effect */
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.9);
transition: 0.3s;
}
/* On mouse-over, add a deeper shadow */
.card:hover {
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.9);
}
/* Add some padding inside the card container */
.container {
padding: 2px 16px;
}
h1 {
font-size: 6vw;
}
input {
width: 100%;
height: 50px;
font-size: 5vw;
}
select {
width: 100%;
height: 50px;
font-size: 5vw;
}
label {
width: 100%;
height: 40px;
font-size: 4vw;
}<div class="card div1">
<label for="Q1">Question 1 ?</label>
<button id="button11" class="button" onclick="setColor('button11', 'red')">YES</button>
<br>
<button id="button12" class="button" onclick="setColor('button12', 'green')">NO</button>
<br>
<button id="button13" class="button" onclick="setColor('button13', 'blue')">N/A</button>
</div>
<br>
<div class="card div1">
<label for="Q2">Question 2 ?</label>
<button id="button21" class="button" onclick="setColor('button21', 'red')">YES</button>
<br>
<button id="button22" class="button" onclick="setColor('button22', 'green')">NO</button>
<br>
<button id="button23" class="button" onclick="setColor('button23', 'blue')">N/A</button>
</div>
<br>
<div class="card div1">
<label for="Q3">Question 3 ?</label>
<button id="button31" class="button" onclick="setColor('button31', 'red')">YES</button>
<br>
<button id="button32" class="button" onclick="setColor('button32', 'green')">NO</button>
<br>
<button id="button33" class="button" onclick="setColor('button33', 'blue')">N/A</button>
</div>Progress so far