• Empleos
  • Sobre nosotros
  • profesionales
    • Inicio
    • Empleos
    • Cursos y retos
    • Preguntas
    • Profesores
  • empresas
    • Inicio
    • Publicar vacante
    • Nuestro proceso
    • Precios
    • Pruebas Online
    • Nómina
    • Blog
    • Comercial
    • Calculadora de salario

0

158
Vistas
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);

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

"

  1. and i try to grab class name of button but its not grabbing and logging out on console
  2. how do I grab button class name "tick"**
almost 3 years ago · Juan Pablo Isaza
2 Respuestas
Responde la pregunta

0

Try

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

almost 3 years ago · Juan Pablo Isaza Denunciar

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

almost 3 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recomiéndame algunas ofertas
Necesito ayuda