1

Intento añadir un clase a una etiqueta HTML desde JavaScript, pero me da un error:

Uncaught TypeError: Cannot read property 'classList' of null

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) {
  return document.querySelector(`[data-key = '${keyCode}']`); //etiqueta <p></p>
}

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.rojo {
  color: #e74c3c;
}
p.amarillo {
  color: ffc300;
}
p.verde {
  color: #2ecc71;
}
<div class="btns" id="n1">
  <p class="centro normal" data-key="49">1</p>
</div>

3
  • Estás colocando el script antes del </body> o en el header? Commented el 30 dic. 2017 a las 22:06
  • @AndySamuelAlvarado en el <head>, y también lo intenté al final del <body> Commented el 30 dic. 2017 a las 22:07
  • has probado con element.className = 'nombreClase';???
    – asantana o
    Commented el 30 dic. 2017 a las 23:42

1 respuesta 1

0

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>

2
  • gracias por la ayuda. Commented el 31 dic. 2017 a las 2:06
  • De nada bro! Un saludo!
    – Eztronics
    Commented el 31 dic. 2017 a las 2:07

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.