Ya arreglé tu código. El problema surge de que la función document.querySelector();
no se ejecuta (algún bug que tiene?) cuando el valor de la propiedad del elemento (name, id, class o data-key en tu caso) empieza con un número. Lo solucioné agregandole una "n" en el data-key del elemento y entonces en el jquery luego de tener el keyCode en la función getElementByKeyCode(keyCode)
también le agregue la misma "n" para poder realizar bien la busqueda.
Tenías además dos errores.
1) La declaración que hiciste dentro del .queryselector()
es invalida. Esta es tu declaración:
document.querySelector(`[data-key = '${keyCode}']`);
Lo solucioné adaptando tu función de esta forma:
function getElementByKeyCode(keyCode) {
var tag= "[data-key=n" + keyCode.which + "]";
return document.querySelector(tag);
}
2) Nunca capturas el valor de la tecla presionada como tal. Es decir siempre pasas el objeto keyCode pero nunca obtienes su valor.
La manera de obtener el valor de un objeto de este tipo no es como el estándar que utilizamos de .value o .val() realmente se obtiene con .which de la siguiente manera:
var códigodetecla =keyCode.which;
Observación: No colocaste los demas elementos asignados a los otros códigos de tecla por lo que en tu caso y para el código que colocaste no arrojará el error de "null" solo para el data-key="n49" o la tecla "1" cuyo código es el 49 para las demás teclas que capturas en evento (enter por ejemplo o delete) arrojarán el error si las presionas, esto es lógico porque no existe el elemento html asociado a la tecla. Queda de tu parte colocar los demás elementos que quizás ya tienes creados pero no incluiste en el código que suministraste o capturar la excepción para evitar que de el error de:
Uncaught TypeError: Cannot read property 'classList' of null
Eso es todo. Un saludo!
window.addEventListener('keydown', onKeydown);
const num_ok = [13, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 190];
const cancelar = 46;
const borrar = 8;
function getElementByKeyCode(keyCode) {
var tag= "p[data-key=n" + keyCode.which + "]";
return document.querySelector(tag);
}
function changeColor(keyCode, opts = {}) {
const element = getElementByKeyCode(keyCode);
if (opts.num || opts.ok) {
element.classList.add('verde');
} else if (opts.del) {
element.classList.add('rojo');
} else if (opts.back) {
element.classList.add('amarillo');
}
setTimeout(() => {
deactive(element)
}, 1000);
}
function deactive(element) {
element.className = "num";
}
function onKeydown(event) {
if (num_ok.includes(event.keyCode)) {
changeColor(event, {
num: true,
ok: true
});
} else if (event.keyCode == cancelar) {
changeColor(event, {
del: true
});
} else if (event.keyCode == borrar) {
changeColor(event, {
back: true
});
}
}
.num {
color: #fff;
}
p.verde {
color: #2ecc71;
}
<div class="btns" id="n1">
<p class="centro normal" data-key="n49">1</p>
</div>
<head>
, y también lo intenté al final del<body>