Clicking on a li twice before it console logs using vanilla js?

Question

I'm new at JavaScript so I hope this isn't a dumb mistake. I have an unordered list with 5 li elements. I was trying to get the text from a clicked li. (console.log). But it will only console.log on the second time I click the li. I've tried many things but nothings working, can someone help me? Thank you.

Here is my code...

var mainUl = document.querySelector('#main-list').addEventListener('click', liPick);
// //console.log(mainUl);

function liPick() {
  var ele = document.querySelectorAll('#main-list li');
  ele.forEach(function(item) {
    item.onclick = function(e) {
      //var myText = this.innerText;
      //console.log(myText);
      //alert(this.innerText);
      //var myDiv = document.getElementById('#whatclicked');

      console.log(this.innerText);

    }
  });





  
  
  
  
  
  JavaScript Selectors



  
    
      Item 1
      Item 2
      Item 3
      Item 4
      Item 5

user_11521081 · Answer

Try setting the query selector properly. right now it wont set it as long as the variable mainUl is not accessed. Try going from this

var mainUl = document.querySelector('#main-list').addEventListener('click',liPick);

to this

document.querySelector('#main-list').addEventListener('click',liPick);

that will set it as soon as the document is loaded

user_2951933 · Answer

This will work, just run the function you are already attaching events inside of it, no need for another eventListener

 function liPick() {
   var ele = document.querySelectorAll('#main-list li');
   ele.forEach(function(item) {
     item.onclick = function(e) {
       //var myText = this.innerText;
       //console.log(myText);
       //alert(this.innerText);
       //var myDiv = document.getElementById('#whatclicked');

       console.log(this.innerText);
     }
   })
 }
 
 liPick()


  

    
      
      
      
      
      
      JavaScript Selectors
    

    
      
        
          Item 1
          Item 2
          Item 3
          Item 4
          Item 5

user_13220349 · Answer

Looks like you assign the click event listener to the li inside another click event.

Move the code currently inside the liPick function- out of the function or call the liPick function on a different timing.

user_4398966 · Answer

you have two click events in your code, that's what's causing the problem. remoe one and you're good to go.

var mainUl = document.querySelector('#main-list').addEventListener('click',liPick);
// //console.log(mainUl);

function liPick(){
var ele = document.querySelectorAll('#main-list li');
ele.forEach(function(item) {
    
        var myText = item.innerText;
        //console.log(myText);
        //alert(this.innerText);
        //var myDiv = document.getElementById('#whatclicked');
        

        console.log(myText);

   
});
}


one
two

Admin · Answer

const els = document.querySelectorAll('#main-list li');

els.forEach(function(item) {
  item.addEventListener('click', liPick, false)

})

function liPick() {
  alert(this.innerText)
}


    
        Item 1
        Item 2
        Item 3
        Item 4
        Item 5

Clicking on a li twice before it console logs using vanilla js?

5 Answers