javascript - How to dynamically pass in a parameterized function to addEventListener?

Question

There is an unadopted answer to "Xiao Xiao Yu Xie", which is also useful, but I don't know the specific usage of let yet. Sorry, I really want to adopt two.

The result must be
click button1 alert(3)
click button2 alert(3)

How to modify the code to make
click button1 alert(1)
click button2 alert(2)

I feel that this problem is a bit similar to the classic closure problem of settimeout, but I can't think of any solution.

Please give me some advice.

Answer 1

function myclick(i){
    return function(){
         alert(i)
    }

The second parameter is passed to myclick(i)

Answer 2

Save parameters in the attributes of each button element.
or use let

Answer 3

<button id='myButton1' data-info='abc'></button> After clicking the button, get the attributes in the button's data-info

Answer 4

Jquery generally operates the DOM. When rendering, it is usually spliced ​​onto the DOM in the data-* format, and then it is obtained and then used $(this).attr(key)

Answer 5

Change var to let

 window.onload = function () {
      for (let i = 1; i < 3; i++) {
        document.getElementById('myButton' + i)
          .addEventListener('click', () => {
            myClick(i)
          })
      }
    }