Here is the code snippet that I am currently working with:
HTTP:
<label class="instructions" for="hidden_x"> Insert X: </label>
<button type="button" class="button" name="button_x" value="1" id="x_1" onclick="document.getElementById('hidden_x').value = 1"> 1 </button>
<button type="button" class="button" name="button_x" value="2" id="x_2" onclick="document.getElementById('hidden_x').value = 2"> 2 </button>
<button type="button" class="button" name="button_x" value="3" id="x_3" onclick="document.getElementById('hidden_x').value = 3"> 3 </button>
<button type="button" class="button" name="button_x" value="4" id="x_4" onclick="document.getElementById('hidden_x').value = 4"> 4 </button>
<input type="hidden" name="hidden_x" id="hidden_x" value=""> <br>
JavaScript:
window.onload = function(){
let buttonsX = document.getElementsByName("button_x");
for (let i = 0; i < buttonsX.length; i++) {
buttonsX[i].onclick = function (event) {
document.getElementById("hidden_x").value = event.target.value;
buttonsX.forEach(elem => elem.classList.remove("focused"));
/*event.target.classList.add("focused");*/
this.classList.add('focused');
}
}
}
CSS:
.button .focused{
background-color: darkgreen;
}
After clicking the button, the color does not change as expected. What changes should be made to correct this issue?