Iterator abnormal behavior within a JS function

Question

I have a function to generate pagination buttons dynamically, so I have to generate a button for each page ( of the page total ), so I used a for for that reason.

$('#resultadoBusca').append('<ul id="resultPaginacao" onClick="buscar()" class="pagination justify-content-center">');
for(i=0; i < result['total_paginas']; i++){
    $('#resultPaginacao').append(`<li value=${i+1} class="page-item"><a class="page-link">${i+1}</a></li>`);
}
$('#resultPaginacao').append('</ul>');

What’s weird is that when I give one $('#resultPaginacao li').val() to get the value, it is always returned me 1, for some reason the iterator that puts the value in value is not being incremented, but to put the item number, is. It prints the right buttons, 1,2,3,4...

My goal is, when clicked on one of these buttons of pagination, the function buscar() is called, and it should take the value of the button that was clicked. Someone has an idea of how to do this, without changing the code format too much ?

I thought I’d try to take the amount like this: $('#resultPaginacao li').text() but it always returns me the value of 123456

EDIT:

Value is being assigned correctly, it seems that the problem is in the capture of that value

Answer 1

Well, I solved it this way

$('#resultadoBusca').append('<ul id="resultPaginacao" class="pagination justify-content-center">');
for(i=0; i < result['total_paginas']; i++){
    $('#resultPaginacao').append(`<li onClick="buscar(${i+1})" class="page-item"><a class="page-link">${i+1}</a></li>`);
}
$('#resultPaginacao').append('</ul>');

I basically passed the value of the page to the search function, so I don’t have to worry about capturing the value with Jquery..