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

83
Views
EventListener on a new element added with JavaScript not trigerring because of element value seems to be null

Im new with js and i try, with my current knowledge, to make this work but i cant. In the main HTML i have this button that onclick, add new content to another section from the main HTML. This new content has also another buttons. Wanted to addEventListeners to them, but constantly failing. Tried to fix this with a lot of alternatives. For example in the new HTML code, adding in the button tag an onclick="function" but also not working. Im getting on console:

Uncaught TypeError: Cannot read properties of null (reading 'value')

I read a few different options that goes beyond my knowledge or some options that talk about waiting the DOM to load that element before applying the event listener but i do not know how to do that. This is the code so far:

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='';
});

The thing is that, the event listener on hrx works fine because adds this new HTML content, and also the CSS is applying correctly. The part that isnt working is the one from the bottom, btn2 event listener not triggering because it seems that btn1 is null (tried that on console). Also tried this code in another file for itself and it works. If you need more details just ask, thanks!

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!