Question

0

243

Views

how to grab button class name created in javascript

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">&#10003;</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);

**

i have create a button and added class name ="tick

"

and i try to grab class name of button but its not grabbing and logging out on console
how do I grab button class name "tick"**

about 4 years ago · Juan Pablo Isaza

2 answers

Answer question

0

Try

var tickbtn=document.getElementsByClassName("tick")[0];

about 4 years ago · Juan Pablo Isaza Report

0

Answer question

Find remote jobs

Accepted Answer · 2022-07-09T09:53:18.334Z

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">&#10003;</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.

0

243

how to grab button class name created in javascript

2 answers

0

0

Find remote jobs

Andres GPT