es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Selector de :focus en CSS con Javascript

15 Jul, 2023 Programación

Tengo numerosos botones que creo con la etiqueta ‘button’. Estoy usando el selector :focus para cambiar el color del botón a amarillo desde otro color cuando hago clic en él.

Ahora tengo código de Javascript que hace lo mismo (cambiar el color de fondo del botón), la única diferencia es que está conectado a un input.

Aquí tienes 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 primer botón, :focus funciona.
Mi problema es que después de ejecutar el código de JavaScript con el input (ingresar caracteres al input), el selector :focus ya no funciona si intento hacer clic en algún botón.
¿Existe alguna opción para que el efecto :focus vuelva a funcionar después de ese código de JavaScript sin usar el evento onclick con JavaScript?

Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Una posible solución a este problema sería agregar una clase CSS a los elementos de botón en lugar de modificar directamente sus propiedades de estilo en el código JavaScript. Puedes definir los estilos para la nueva clase en CSS y alternarla activada y desactivada usando JavaScript.

    Aquí tienes un ejemplo de cómo podrías implementar esto:

    HTML

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

    CSS

    #One,
#Two {
  background-color: gray;
}

#One:focus,
#Two:focus,
.button-yellow {
  background-color: yellow;
}

    JavaScript

    function coloringButton() {
  let myInput = document.getElementById("numbers");
  let lastChar = myInput.value.slice(-1);

  switch (lastChar) {
    case '1':
      document.getElementById("Two").classList.remove("button-yellow");
      document.getElementById("One").classList.add("button-yellow");
      break;

    case '2':
      document.getElementById("One").classList.remove("button-yellow");
      document.getElementById("Two").classList.add("button-yellow");
      break;

    default:
      document.getElementById("One").classList.remove("button-yellow");
      document.getElementById("Two").classList.remove("button-yellow");
      break;
  }
}

    En esta versión del código, definimos una nueva clase llamada button-yellow en CSS, que aplica el color de fondo amarillo. Esta clase inicialmente no se aplica a ningún botón, pero puede alternarse activada o desactivada utilizando la propiedad classList en JavaScript.

    En la función coloringButton(), eliminamos la clase button-yellow del botón que no está seleccionado y la agregamos al botón que está seleccionado. Si no se selecciona ningún botón (es decir, el valor de entrada no termina ni en “1” ni en “2”), eliminamos la clase de ambos botones.

    De esta manera, el resaltado amarillo seguirá funcionando después de que se ejecute el código JavaScript, incluso sin utilizar el selector :focus.

Comments are closed.