Tengo numerosos botones que creo con la etiqueta 'botón'. Estoy usando :focus Selector para cambiar el color del botón a amarillo de otro color cuando hago clic en él.
Ahora, tengo un código Javascript que hace lo mismo (cambiar el color de fondo del botón), la única diferencia es que está conectado a la entrada.
aquí hay un ejemplo:
function coloringButton() { let myInput = document.getElementById("numbers"); let lastChar = myInput.value.slice(-1); switch (lastChar) { case '1': document.getElementById("Two").style.backgroundColor = 'gray'; document.getElementById("One").style.backgroundColor = 'yellow'; break; case '2': document.getElementById("One").style.backgroundColor = 'gray'; document.getElementById("Two").style.backgroundColor = 'yellow'; break; } } #One, #Two { background-color: gray; } #One:focus, #Two:focus { background-color: yellow; } <input type="text" id="numbers" name="numbers" autocomplete="off" onkeyup='coloringButton()'> <button type="button" id='One'> <span>1</span> </button> <button type="button" id='Two'> <span>2</span> </button>Cuando hago clic en el botón primero, el enfoque está funcionando. Mi problema es que después de ejecutar el código javascript con la entrada (ingresar caracteres para ingresar), el selector de enfoque ya no funciona si trato de hacer clic en algún botón. ¿Hay alguna opción para que: el efecto de enfoque vuelva a funcionar después de ese código javascript sin usar el evento onclick con javascript?
La propiedad .style tiene prioridad sobre los estilos que provienen de CSS.
Puede usar el indicador !important en los estilos CSS para anular esto.
function coloringButton() { let myInput = document.getElementById("numbers"); let lastChar = myInput.value.slice(-1); switch (lastChar) { case '1': document.getElementById("Two").style.backgroundColor = 'gray'; document.getElementById("One").style.backgroundColor = 'yellow'; break; case '2': document.getElementById("One").style.backgroundColor = 'gray'; document.getElementById("Two").style.backgroundColor = 'yellow'; break; } } #One { background-color: gray; } #One:focus { background-color: yellow !important; } #Two { background-color: gray; } #Two:focus { background-color: yellow !important; } <input type="text" id="numbers" name="numbers" autocomplete="off" onkeyup='coloringButton()'> <button type="button" id='One'> <span>1</span> </button> <button type="button" id='Two'> <span>2</span> </button>Agregaría un caso adicional a su función:
case '': document.getElementById("One").style = null; document.getElementById("Two").style = null; break;Esto cancelará los cambios realizados en los botones por js y volverá al estilo CSS dejando todo lo demás como está. También evita un escenario en el que hay un '1' en el campo de entrada que cambia el color del botón 1 a amarillo, y usted enfoca el botón 2 a mano y también cambia su color a amarillo. 1
