javascript - 如何修复按下按钮的颜色选择？

Question

我有以下代码:

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;
}

当我按下按钮时，它的颜色没有改变。怎样才能修复它？

Answer 1

你的CSS说在.button中找到.focused类，所以它不会改变颜色。删除两个类之间的空间会有所帮助。

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"));
        this.classList.add('focused');
    }
}
}

.button.focused{
background-color: darkgreen;
}

<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>