0

Hola necesito buestra ayuda... Estoy teniendo este error en mi proyecto

Uncaught TypeError: can't access property "onclick", document.getElementById(...) is null

Me da este error por que en la pagina que estoy actualmente no existe ese elemento, si no en otra pagina pero comparten el mismo script para algunas de las funciones, creo que tendria que hacer una condicional condicionando ese elemnto a su existencia para decirle que si no esta en esta pagina que no lo ajecute pero nose muy bien cual seria la sintaxis

el elemento que me da error seria este...
document.getElementById('boton').onclick = function(){
 animar();
}
1
  • Hola hay un post similar que podria ayudarte. Saludos!
    – jsanbae
    Commented el 9 ene. 2022 a las 15:11

2 respuestas 2

0

La forma en que yo lo haría sería la siguiente:

<button onclick="animar()">Click me!</button>

<script>

function animar() {
   //todo
   alert("funciona!!");
}

</script>

2
  • muchisimas gracias
    – Aitor m
    Commented el 9 ene. 2022 a las 15:21
  • Si mi respuesta solucionó tu problema, por favor recuerda marcar el check como respuesta correcta. Commented el 9 ene. 2022 a las 15:23
0

No te recomendaría agregar el código javaScript en el html, es una mala practica. Mejor saca todo tu codigo javaScript a un fichero a parte y vincularlo al HTML con <script src='tuScript.js' ></script> justo antes de </body>

Para solucionar ese error simplemente almacena el botón en una variable y si dicha variable no es nula entonces agrégale la función.

function loadEvents () {
  let boton = document.getElementById("boton");
  if(boton !== null) {
    boton.addEventListener("click", () => {alert("Me has pinchado")});
  }
  
  let botonInexistente = document.getElementById("botonInexistente");
  if(botonInexistente !== null) {
    botonInexistente.addEventListener("click", () => {alert("No existo")});
  }
}


// Esta linea para cargar los eventos una vez cargados los elementos del DOM
addEventListener("DOMContentLoaded", loadEvents);
<!doctype html>
<html lang='es'>

<head>
    <meta charset='utf-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <title>Hello, world!</title>
</head>

<body>
    <button type="button" id="boton">Pulsame</button>
    <script src='tuScript.js' ></script>
</body>

</html>

1
  • perfecto esto seria mejor idea,muchas gracias
    – Aitor m
    Commented el 10 ene. 2022 a las 13:27

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.