var inputEl=document.querySelector("#input-bar"); var addBtnEl=document.querySelector("#btn"); var ulEl=document.querySelector("#output-line"); // var list=document.querySelector(".list"); console.log(inputEl); let savedIn=[]; addBtnEl.addEventListener("click",function(){ savedIn.push(inputEl.value); console.log(savedIn); console.log(savedIn.length); for(let i=0;i<savedIn.length;i++){ var sample=`<li class="list">${savedIn[i]}</li><button class="tick"><span id="tick-span">✓</span></button><br>`; console.log("in for"); } ulEl.innerHTML+=sample; // ulEl.innerHTML+=`<li>helloo</li><button>hiii</button>`; }); // tickbtn.addEventListener("click",function(){ // // list.style.backgroundColor="blue"; // console.log("tick btn"); // }); var tickbtn=document.getElementsByClassName("tick"); console.log(tickbtn); **"
Probar
var tickbtn=document.getElementsByClassName("tick")[0];Después de probar su código en https://codepen.io/pen/ (que le recomiendo que use para cosas rápidas de interfaz), llegué a la siguiente solución:
var inputEl=document.querySelector("#input-bar"); var addBtnEl=document.querySelector("#btn"); var ulEl=document.querySelector("#output-line"); // var list=document.querySelector(".list"); console.log(inputEl); let savedIn=[]; function f() { savedIn.push(inputEl.value); for(let i=0;i<savedIn.length;i++){ var sample=`<li class="list">${savedIn[i]}</li><button class="tick"><span id="tick-span">✓</span></button><br>`; console.log("in for"); } ulEl.innerHTML+=sample; } function g() { var tickbtn = document.getElementsByClassName("tick"); console.log(tickbtn[0]); } <input type="text" id="input-bar"> <button id="btn" onclick="f(); g()">Click</button> <div id="output-line"></div> Así, la salida ya no estará indefinida; mostrará el primer botón ( tickbtn[0] ). Y como te dije anteriormente en la sección de comentarios, es preferible no usar detectores de eventos en esta situación . Para cualquier otro problema, no lo dudes.