Color current page link

Question

I have a html code in

   render(){
    return { 
     return <div>
      return (

    <div style={{'margin-top':'1vh'}}>
      <ul className='pagination' style={{  display: 'flex', 'align-items': 'center', 'justify-content': 'center'}}>
        {pageNumbers.map(number => (
          <li key={number} className='page-item'>
            <a onClick={(event) => paginate(number, event)} className='page-link' id = 'cpageNumber' >
              {number}
            </a>
          </li>
        ))}
      </ul>
    </div>
  );
</div> } }

---

after clicking on link i reload the page and get another 100 elements from back end, in mozilla i tried document.queryselectorAll() and it's worked but in Chrome it doesn't.
All another css ways don't work because a reload page and after this they disappear.

---

   document.addEventListener('readystatechange', (event) => {

   alert(document.querySelectorAll('fieldset').length) // returns 0
   })

window.onload also doesn't help

How to color current page link after page loaded ?

Answer 1

If I understand the issue correctly, you are fetching the pagination items after the page loaded, correct?

If that is the case, you have to write the current page highlight related code in the callback that executes after you fetch the pagination information.

If that is not the case and you are getting the pagination items as part of the HTML itself, then you need to re-check your querySelector , may be you are doing the query.

Please paste the complete code for fetching the pagination information and the rendering of elements, if you have any further queries.