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);
**
"
Try
var tickbtn=document.getElementsByClassName("tick")[0];
After testing your code on https://codepen.io/pen/ (which i recommend you to use for quick frontend stuff), I come up to the following solution :
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>
Like that the output won't be undefined anymore ; it will display the first button (tickbtn[0]
). And as I told you above in the comments section, it's preferably to not use event listeners in this situation.
For any other problem, do not hesitate.