Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

91
Views
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
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!