如何修復按下按鈕的顏色選擇？
[英]How can I fix colour selection of a pressed button?
問題描述
我有以下代碼：
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;
}
當我按下按鈕時，它的顏色不會改變。 怎么可能修復它？
2 個解決方案
解決方案1
3 已采納 2019-09-24 10:44:02
您的 css 說在 .button 內找到.focused .button ，因此它不會改變顏色。 刪除兩個類之間的空間會有所幫助。
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>
解決方案2
0 2019-09-24 11:22:06
簡單的方法.... onclick="document.getElementById("sent Id of the button")。
<!DOCTYPE html>
<html>
<body>
<style>
.mystyle {
width: 20%;
background-color: darkgreen;
color: white;
font-size: 25px;
}
.mystyle1 {
width: 20%;
color: white;
background-color: grey;
font-size: 25px;
}
</style>
<button class="mystyle1" id="x_1" onblur="myFunction(id)" onfocus="myFunction(id,'focus')">Click me</button>
<button class="mystyle1" id="x_2"onblur="myFunction(id)" onfocus="myFunction(id,'focus')">Click me</button>
<script>
function myFunction(ou,type) {
var element = document.getElementById(ou);
if(type=="focus"){
element.classList.add("mystyle");
element.classList.remove("mystyle1");
}
else{
element.classList.add("mystyle1");
element.classList.remove("mystyle");
}
}
</script>
</body>
</html>
做動態...
我該怎么辦：“按下錄制按鈕后，該按鈕將閃爍”
[英]How can I do: “As the the record button is pressed, the button will be flashing”
如何獲取 ExtJS 中按鈕的“按下”屬性的狀態？
[英]How can I get the status of the "pressed" property of a button in ExtJS?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.