0

Tengo el un proyecto react y me sale el error:

TypeError: Cannot read property 'classList' of null

Cuando intento agregar una clase aun elemento HTML identificado con un ID

Sinceramente no se que estoy haciendo mal. La idea es que al hacer clic se agrege la clase css sobre el elemento.

Código JavaScript:

function AnimacionAnswers(){
  document.getElementById('correcta').classList.add('questionCorrect');
}

Codigo Html y React:

export default function Answers() {
  return (
    <div className="botones">
      <div className="row justify-content-center align-items-center">
        <div id="correcta" className="col-6 btn-respuestas" onClick={AnimacionAnswers()}>A. Respuestas</div>
        <div className="col-6 btn-respuestas">B. Respuestas</div>
      </div>
      <div className="row justify-content-center align-items-center">
        <div className="col-6 btn-respuestas">C. Respuestas</div>
        <div className="col-6 btn-respuestas">D. Respuestas</div>
      </div>
    </div>
  );
}

1 respuesta 1

0

Estás ejecutando/invocando la función AnimacionAnswers() en el onClick. Deberías poner la referencia de la función, es decir, AnimacionAnswers sin los parentesis y cuando ocurra el evento click ya se invocará a la función AnimacionAnswers.

export default function Answers() {
  return (
    <div className="botones">
      <div className="row justify-content-center align-items-center">
        <div id="correcta" className="col-6 btn-respuestas" onClick={AnimacionAnswers}>A. Respuestas</div>
        <div className="col-6 btn-respuestas">B. Respuestas</div>
      </div>
      <div className="row justify-content-center align-items-center">
        <div className="col-6 btn-respuestas">C. Respuestas</div>
        <div className="col-6 btn-respuestas">D. Respuestas</div>
      </div>
    </div>
  );
}

En react no se recomienda acceder elementos del DOM directamente, sino que deberías usar Refs.

1
  • Muchas gracias funciono bien voy a revisar lo que me comentas de las Refs, no lo conocía dado que soy nuevo en este tema de React. Commented el 23 mar. 2021 a las 13:14

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.