Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

380
Vistas
Problem when trying to add an element to a page using appendChild in JS. Throws an error: "is null, undefined"

I am trying to authorize the site through Firebase, everything works as it should, the data is sent to the Firebase server. But further, in the signIn function, I try to create a h2-element and put the mail data into it, which the user entered and clicked on the Login button (I want the mail to be displayed on the site instead of the name), then an error appears on the line where I highlighted with a red arrow: "autorizationName is null, undefined ", no data is sent to html. I can’t understand why, so help, please, I’m recently studying JS to figure it out.

This can happen if I added one JS script to two HTML pages? That is, index.html and autorization.html to the two I added autorization.js I wanted it to be redirected to the main page when authorizing from one page.

  const login = document.querySelector(".form-login")
  login.addEventListener('click', signIn)

function signIn() {
  const email = document.querySelector(".email").value
  const password = document.querySelector(".password").value
//   e.preventDefault()

  signInWithEmailAndPassword(auth, email, password)
      .then((userCredential) => {
          // Signed in 
          const user = userCredential.user;                        
          console.log("Email firebase: ",  user.email);           

          const user2 = JSON.parse(JSON.stringify(user.email))

          const autorizationName = document.querySelector(".autorization-name__container");
          const autorizationNameTitle = document.createElement("h2");
          autorizationNameTitle.textContent = user2;
          autorizationNameTitle.classList.add("autorization-name__title");
          

          autorizationName.appendChild(autorizationNameTitle); // Error: autorizationName is null, undefined
          window.location.replace("http://192.168.1.65:5500/")  
                 
      })

      .catch((error) => {
          const errorCode = error.code;
          const errorMessage = error.message;
          alert(errorMessage + ", " + errorCode);
      });
  }

Here are screenshots:

enter image description hereenter image description here

about 4 years ago · Juan Pablo Isaza
2 Respuestas
Responde la pregunta

0

At the line of

autorizationName.appendChild(autorizationNameTitle);

you are getting an error which says that authorizationName is null, undefined. So, logically, we need to take a look at the place where its value was modified the last time (in this case, it is its initialization):

const autorizationName = document.querySelector(".autorization-name__container");

And it is a known fact that if your call to document.querySelector yields undefined, then the selector did not match any elements. So, the reason for the error is that there is no element in your page with the class of authorization-name__container at the time you try to find it. So, you will need to fix the selector or find out when the given element is created.

about 4 years ago · Juan Pablo Isaza Denunciar

0

It is 100% an error with the string '.authorization-name__container', try to copy paste this class from where you have it in your code and double check for mispelled words. Then if that doesn't work try to use an id instead of a class

about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda