0
<form name="Registro" method="get">
   <table>
      <tr>
         <td>Nombre:</td>
         <td><input type="text" name="nombre" class="B4I1"></td>
      </tr>
      <tr>
         <td>Apellido:</td>
         <td><input type="text" name="apellido" class="B4I2"></td>
      </tr>
      <tr>
         <td>Edad:</td>
         <td> <input type="number" name="edad" id="B4I3"></td>
      </tr>
      <tr>
         <td></td>
         <td><input type="submit" id="B4I4"></td>
      </tr>
   </table>
</form>

Mi código javascript es el siguiente:

function Comenzar(){
    console.log("hasta aca estoy")
    var nombre1
    var apellido1
    nombre1=document.getElementsByClassName("B4I1");
    apellido1==document.getElementsByClassName("B4I2");

    nombre1.addEventListener("keyup",validacion,false);
    apellido1.addEventListener("keyup",validacion,false);
    

    validacion();
}
function validacion(){

    if ((nombre1.value==" ") && (apellido1.value==" ")){
        nombre1.setCustomValidity("Introduce nombre, apellido y edad");
        nombre1.style.background="#FFA07A";
        apellido1.style.background="#FFA07A";
        
        
    } else {
        nombre1.setCustomValidity("");
        nombre1.style.background="#5f9ea0";
        apellido1.style.background="#FFFFFF";
        
    }
}
addEventListener("load",Comenzar,false);

Esto me devuelve el error siguiente:

10.Formularios.js:9 Uncaught TypeError: nombre1.addEventListener is not a function

Si alguien puede ayudarme :)

3
  • No me digas que estas usando internet explorer ._.
    – Layer
    Commented el 13 jun. 2020 a las 6:13
  • intenta usando attachEvent en vez de addEventListener, tambien comprueba de que los elementos a los cuales quieres añadirles el listener no estan indefinidos (tus variables contienen el elemento).
    – Layer
    Commented el 13 jun. 2020 a las 6:15
  • Esto: apellido1==document... no es una asignación, es una comparación. Debes tener más cuidado con el código. Revisar bien lo que estás haciendo. Javascript tiene muchas trampas en las que puedes caer si no revisas bien lo que estás haciendo. Saludos Commented el 13 jun. 2020 a las 17:26

2 respuestas 2

3

Este error se produce porque addEventListener solo aplica a elementos HTML y cuando utilizas getElementsByClassName lo que obtienes es una colección de elementos

Para solventarlo has de iterar cada elemento

Por ejemplo puedes hacerlo así

const items = document.getElementsByClassName('demo');

items.forEach(element => {
  element.addEventListener('click', (event) => {
    const { currentTarget } = event;
    
  });
});

Nótese que para usar forEach en todos los navegadores necesitas agregar el polyfill correspondiente, o bien implementar corejs, underscore, lodash u otro equivalente.

1
  • Que error tan tonto, y yo ni me habia percatado, aunque igual no lei mucho el codigo :(, eso es cierto, vamos a ver si le funciona al OP, en cuyo caso tienes mi voto arriba.
    – Layer
    Commented el 13 jun. 2020 a las 6:33
1

Debes hacerlo de la siguiente manera:

window.addEventListener("load",Comenzar);

O si lo prefieres:

window.addEventListener('load', (event) => {
    Comenzar();
});

Una opción más:

window.onload = (event) => {
  Comenzar()
};

¿Por qué acceder al objeto window.addEventListener? Esto es porque al cargar tu página este objeto ya existe a diferencia de los nodos html que se crean posteriormente o aun no han sido cargados.

Imagínate que tu código está al inicio de la página y haces algo así:

app.getElementById('cualquierID');
app.addEventListener('click', function(e){
    console.log('test');
}

Pero supongamos que tu html aún no ha sido cargado, entonces tu código te conduciría a un error. window.load o window.addEventListener por el contrario trabajarían perfectamente porque esperarían hasta que la págima haya sido cargada completamente, asegurando que la etiqueta cualquierID ya exista en el DOM.

Como quedaría entonces:

window.addEventListener('load', function(){
    app.getElementById('cualquierID');
    app.addEventListener('click', function(e){
        console.log('test');
    }
}

Espero que te sirva.

2
  • 2
    Creo que se puede mejorar un poco mas tu respuesta explicandole al OP sobre porque usas esas formas y no simplemente addEventListener, recuerda que como addEventListener hace parte del objeto window entonces puede referenciarse sin tener que usar window, por lo cual window.addEventListener y addEventListener serian casi lo mismo de no ser por un ligero detalle, cual es la diferencia y porque si hay una diferencia?, porsupuesto se la respuesta, pero ese tipo de cosas mejorarian mucho la respuesta para que nuestro OP entienda mejor las cosas.
    – Layer
    Commented el 13 jun. 2020 a las 6:37
  • 1
    Listo @Riven he agregado más detalles. Saludos.
    – allexiusw
    Commented el 13 jun. 2020 a las 6:52

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.