0

¿Alguien ve el error?

En el index.html:

    <!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <script type="text/javascript" src="js.js"></script>
  </head>
  <body>

  <div>
    <p>Introduce los valores:</p>
    <input  type="text" name="arrayInput" id="arrayInput">
    <a id="butt" href='#' >Enviar</a>
  </div>

  </body>
</html>

Y en mi js:

console.log('ok!');

const button = document.getElementById('butt');

eventListeners();

function eventListeners() {
    if (button) {
        button.addEventListener('click', recogerInput);
    } else {
      console.log('No lo encuentro');
    }
  }

Me devuelve el else...

Necesito algo tan simple como que me añada el click al botón, pero no entiendo por qué no lo encuentra ni con getElementById ni con querySelectorAll...

1
  • Falta que agregues la función recogerInput y listo. Pero no entiendo por qué tanto lío para agregar un listener ¿qué es lo que quieres hacer en concreto y por qué usarías dos funciones para un simple listener?
    – A. Cedano
    Commented el 26 mar. 2020 a las 20:42

2 respuestas 2

1

A mi me funciona perfectamente, el unico error que me daba es que la funcion recogerInput no existia, la agregue y aqui esta el ejemplo. Te recomiendo ponerlo antes del </body> para que al momento que cargue tu archivo .js el DOM este completamente cargado.

console.log('ok!');

const button = document.getElementById('butt');

eventListeners();

function eventListeners() {
    if (button) {
        button.addEventListener('click', recogerInput);
    } else {
      console.log('No lo encuentro');
    }
  }
  function recogerInput(){
  console.log("Hey")
  }
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>

  <div>
    <p>Introduce los valores:</p>
    <input  type="text" name="arrayInput" id="arrayInput">
    <a id="butt" href='#' >Enviar</a>
  </div>
<script type="text/javascript" src="js.js"></script>
  </body>
</html>

1
  • Muchas gracias!!!! El problema era ese, la colocación del tag script. Commented el 26 mar. 2020 a las 20:52
1

El problema, como ya se ha dicho, era que no estaba creado el handler (recogerInput) que estabas asignando al evento.

Visto eso, te recomendaría que implementes buenas prácticas en tu código:

  1. Deberías comprobar que el DOM está cargado antes de referirte a cualquier parte de él. Puedes hacerlo agregando un listener a DOMContentLoaded, tal y como explica MDN.
  2. No tiene sentido marear tanto el código, usando dos funciones para agregar un listener. Lo correcto sería simplemente asignar el listener una vez que el DOM se haya cargado, porque es lo que certifica que el elemento se encontrará sí o sí. Si se trata de elementos dinámicos, entonces puedes asignarles una clase, y luego usar querySelectorAll u otro para asignar el listener a los elementos de esa clase.

Hay que optar por la simplicidad en el código, o puedes encontrarte tarde o temprano en medio de un plato de spaghetti.

/*TODO manipulación de elementos del DOM debería ir dentro de este bloque*/
document.addEventListener("DOMContentLoaded", function(event) {
  console.log("DOM fully loaded and parsed");
  /*
    Crea una referencia sólo ni necesitas 
    referirte a este elemento más adelante
    sino puedes hacer una asignación directa con:
    document.getElementById('butt')..addEventListener('click', recogerInput);
  */
  const button = document.getElementById('butt');
  button.addEventListener('click', recogerInput);
});

function recogerInput(e) {
  console.log("ocurrió click en "+e.target.text);
}
<div>
  <p>Introduce los valores:</p>
  <input type="text" name="arrayInput" id="arrayInput">
  <a id="butt" href='#'>Enviar</a>
</div>

2
  • Tienes razón, tengo un montón de código de más. En cuanto a comprobar la carga del DOM... veo que es algo similar a jQuery. Nunca lo había hecho con javascript puro. Muchísimas gracias. Commented el 27 mar. 2020 a las 8:57
  • 1
    @InfiniteRoads jQuery no más que una librería basada en Javascript. Siempre que se pueda es mucho mejor usar Javascript puro, es como la diferencia entre usar el original y una copia basada en él.
    – A. Cedano
    Commented el 27 mar. 2020 a las 10:08

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.