1

Estoy haciendo un teclado virtual y tengo problemas con la tecla para mayúsculas. Quiero que al pulsar el botón Caps éste se ponga en rojo con una clase y el resto de teclas se pongan en mayúsculas.

Tengo este código pero hay algo que no me funciona:

let caps = document.querySelector('.js-caps');
let key = document.querySelectorAll('.js-key');
for (let i = 0; i < key.length; i++) {
    key[i].addEventListener('click', handleButtonClick);
}

function handleButtonClick(ev) {
    textarea.innerHTML += ev.currentTarget.innerHTML;
    console.log(ev.currentTarget.innerText)
    console.log(ev.currentTarget.innerText.toUpperCase())
    
}
function handleCapsClick(ev) {
    ev.preventDefault();
    caps.classList.toggle("red");
    if (caps===".red"){
    key.classList.add ("upper");
    }else{
    key.classList.remove ("upper");
    }   
    }
caps.addEventListener('click', handleCapsClick);
3
  • El evento "click" hace referencia a los botones del ratón, no a las teclas. Te aconsejo que busques información sobre "keydown" y "keyup" Commented el 9 dic. 2021 a las 20:10
  • 1
    Claro, es que es un teclado virtual... al pulsar con el ratón en la tecla escribe la letra del innerhtml. No uso el teclado físico por lo que keydown ni keyup me sirven Lo que necesito es que si pulso con el ratón en caps el resto de teclas se conviertan en letras mayúsculas Commented el 10 dic. 2021 a las 11:26
  • No había entiendo el escenario, tienes razón. Ya veo el problema Commented el 10 dic. 2021 a las 11:35

1 respuesta 1

0

La llamada a querySelectorAll devuelve una lista de objetos:

Tienes

let key = document.querySelectorAll('.js-key');

Quizá la variable debería llamarse keys para evitar confusiones, porque primero la usas correctamente, recorriendo la lista:

for (let i = 0; i < key.length; i++) {
    key[i].addEventListener('click', handleButtonClick);
}

Pero dentro de la función handleCapsClick la tratas como si fuese un único elemento:

function handleCapsClick(ev) {
  ev.preventDefault();
  caps.classList.toggle("red");
  if (caps===".red"){
    key.classList.add ("upper");
  }else{
    key.classList.remove ("upper");
  }   
}

La solución es sencilla:

function handleCapsClick(ev) {
  ev.preventDefault();
  caps.classList.toggle("red");
  key.forEach(elem => elem.classList.toggle("upper"));
}
1
  • Gracias!!! Es lo que me lo ha solucionado!!! Commented el 13 dic. 2021 a las 18:53

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.