如何将以下 Jquery 正确转换为纯 Javascript？

Question

How can I convert the Jquery below to pure JavaScript?

var $buttons = jQuery("#thePaginator li a");
for (var index = 0; index < $buttons.length; index++) {
    var $button = $buttons.eq(index);
    $button.click(function() {
        var newPage = $(this).data("page");
        jQuery("#attribute-myAttribute").val(newPage);
        jQuery("#update").click();
    });
}

I wouldn't normally ask a question like this, but the conversion has been difficult, especially with the event listener. Here is what I have so far:

runPaginate();
function runPaginate(){
    var buttonArray = document.getElementById("paginator_TCC").querySelectorAll('li');
    for(i=0;i<(buttonArray.length);i++){
        buttonArray[i].addEventListener('click', runUpdate);
    }
}

function runUpdate(){
    console.log("runUpdate started")
    // will need to add code in here for update
}

update (in Jquery) is a method that is called to update attributes on the page. Consider the runUpdate function to suffice for that method call.

I believe that I'm having so much trouble because I'm dealing with HTML Collection, so when I get the li elements (which are actually buttons) I can't seem to add an event listener to them. Below is the inspection result from Dev Tools:

<div id="thePaginator" class="simple-pagination">
 <ul>
  <li class="disabled">
   <span class="current prev">Prev</span>
  </li>
  <li class="active">
   <span class="current">Year 1</span>
  </li>
  <li class="disabled">
   <span class="current next">Next</span>
  </li>
 </ul>
</div>

Any assistance is appreciated.

Answer 1

I'd use a for...of loop, and move the callback into the loop. That way you can access the iterator:

 for(const button of buttonArray){
    button.addEventListener('click', function runUpdate() {
      const { data } = button.dataset;
      //...         
    });
 }

Answer 2

This is the JS equivalent of your jQuery (this just replaces the jQuery method calls with their equivalent JS method calls)

var buttons = document.querySelectorAll('#thePaginator li a');
for(var index = 0; index < $buttons.length; index++) {
  var button = buttons[index];
  button.addEventListener("click", function(evt) {
    var newPage = this.dataset.page;
    document.getElementById('attribute-myAttribute').value = newPage;
    document.getElementById('update').click();
  })
}