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!