如何使循环中的 div 可点击

Question

I have the following function on a .JS file (that I later call on an HTML file):

function writeDiv(){
x = 1
myArray.forEach(item => {
    htmlText += '<div class="divsArray">';    
    htmlText += '<h5> Value of X: </h5>' + x;      
    htmlText += '</div>';  
    x++;
  });   
   $('body').append(htmlText); 
   }

This writes me one div, with the said value of X, per entry on my array (in this case 14). What I want to do is, everytime I click on a div it shows me, through a window alert, the value of X that has been assigned to it. I tried some things but I couldn't get it to work, thanks for the help in advance!

Answer 1

As you're seem to use jQuery ( $ ), I would recommend to register a live event handler.

$(document)
  .on('click', '.divsArray', (event)=>{
    console.log(event);
    console.log(event.currentTarget.getAttribute('id'));
     
    // do further stuff here
  });

Answer 2

I don't know is it what you what, but here is it. If you use some variable instead of index, it won't work, cuz when function of setTimeout works, the value of x will be same for every iteration. If you have some other questions type.

function writeDiv() {

  const myArray = [15,5,5];
  let htmlText = "";
  myArray.forEach((item, index)=> {
      htmlText += `<div id="${index}" class="divsArray">`;    
      htmlText += '<h5> Value of X: </h5>' + x;      
      htmlText += '</div>';  
    
      setTimeout(()=>{ 
          document
          .getElementById(index)
          .addEventListener("click",()=>{
          alert(index + 1);
      })},0)
    });   
   document.getElementsByTagName('body')[0].innerHTML = htmlText; 
}
writeDiv();

Answer 3

 function writeDiv() { var temp = [100,150,200,300,400,500]; var innerHtml = ""; temp.forEach((item, index)=> { innerHtml += `<div class="divsArray">`; innerHtml += '<h5> Value of X: </h5><span>' + item +'</span>'; innerHtml += '</div>'; }); document.getElementsByTagName('body')[0].innerHTML = innerHtml; } writeDiv(); $(function() { $('.divsArray').click(function() { let addMoreRoomClone = $(this).find('span').html(); alert(addMoreRoomClone); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>