how to change the color of an icon after the page loads using jquery

Question

I have an icon that i want to change the color after document loads to indicate that the user has that particular item in the database.

HTML

<li>
  <div class="bookmark">
      <i class="fas fa-bookmark"></i>
  </div>
</li>

Here is my jquery code

 const bookmark = document.querySelector('.fa-bookmark')


$(document).on('load', '.bookmark', (event) => {
    console.log("in jquery function")
    let user = sessionStorage.getItem('user');
    
   

    if (user) {//if user is signed in
          bookmark.classList.add('amber-text');
    }

});

When the document loads, I want the event listener to change the color if the item is in the users database. But for some reason, this isn't working. Im not sure if i am using the right event. The same code works if I use a click event instead of load.

Answer 1

You should use the ready function:

$(document).ready(()=>{
    ...
})