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

85
Vistas
EventListener en un nuevo elemento agregado con JavaScript que no se activa debido a que el valor del elemento parece ser nulo

Soy nuevo con js e intento, con mi conocimiento actual, hacer que esto funcione, pero no puedo. En el HTML principal tengo este botón que, al hacer clic, agrega contenido nuevo a otra sección del HTML principal. Este nuevo contenido también tiene otros botones. Quería agregarles EventListeners, pero fallaba constantemente. Intenté arreglar esto con muchas alternativas. Por ejemplo, en el nuevo código HTML, agregar en la etiqueta del botón un onclick="function" pero tampoco funciona. Me estoy subiendo a la consola:

TypeError no capturado: no se pueden leer las propiedades de nulo (leyendo 'valor')

Leí algunas opciones diferentes que van más allá de mi conocimiento o algunas opciones que hablan de esperar que el DOM cargue ese elemento antes de aplicar el detector de eventos, pero no sé cómo hacerlo. Este es el código hasta ahora:

 let hxr = document.querySelector('.hxr'); let content = document.querySelector('.content'); hxr.addEventListener('click',()=>{ content.classList.remove('content'); content.classList.add('frdesign'); if (content.classList.contains('bndesign')||content.classList.contains('hxrdesign')){ content.classList.remove('bndesign'); content.classList.remove('hxrdesign'); } else {}; content.innerHTML = ` <h3 class="title">numeros</h3> <div autocomplete="off" class="contenedor"> <input type="text" class="inputs uno" placeholder="agregar"> <button class="inputs dos">Confirm</button> </div> <div class="contenedor2"> <button class="inputs reset">Reset</button> <button class="inputs resultado"></button> <button type="reset" class="inputs confirmar">realizar</button> </div> `; }); let btn1 = document.querySelector(".uno"); let btn2 = document.querySelector(".dos"); let res = document.querySelector(".resultado"); let confirmar = document.querySelector(".confirmar"); let list = []; btn2.addEventListener('click',()=>{ if (btn1.value!==''){ list.push(btn1.value); } else {} btn1.value=''; });

El caso es que el detector de eventos en hrx funciona bien porque agrega este nuevo contenido HTML y también el CSS se aplica correctamente. La parte que no funciona es la de abajo, el detector de eventos btn2 no se activa porque parece que btn1 es nulo (lo intenté en la consola). También probé este código en otro archivo por sí mismo y funciona. Si necesita más detalles solo pregunte, ¡gracias!

about 4 years ago · Juan Pablo Isaza
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