title: How do I change an event.target's HTML
body: <p>I'm trying to execute a function and change an HTML icon with the same event. Basically what I've done is added an icon with a class of an empty or full star graphic depending on whether the item the star is next to is a &quot;favorite&quot; or not:</p>
  <pre><code> &lt;i class=&quot;${starStatus} fa-star&quot;&gt;&lt;/i&gt;
  </code></pre>
  <p>and attached to that a click event:</p>
  <pre><code>$('i').click(User.toggleFavorite)
  </code></pre>
  <p>that executes a function. The function's purpose is to add the story that is nearest the star to a favorites database and then to change the star to be either filled (if favorited) or emptied (if unfavorited). I cannot figure out how to just change the event target's HTML to make it either filled or emptied. Here is the function in question:</p>
  <pre><code>  static async toggleFavorite(evt){
      let star = (evt.target.closest('i'))
      const storyToFavoriteId = evt.target.closest('li').id
      let storyToToggle = await axios.get(`${BASE_URL}/stories/${storyToFavoriteId}`)
      storyToToggle = storyToToggle.data.story
      const isStoryAFavorite = User.checkIfFavorite(storyToToggle);
      if(isStoryAFavorite){
        //change the star to empty &lt;i class=&quot;$far fa-star&quot;&gt;&lt;/i&gt;
      } else {
        //change the star to be filled: &lt;i class=&quot;$fas fa-star&quot;&gt;&lt;/i&gt;
      }
    }
  </code></pre>
  <p>The only important part really is the bottom if/else statement. Changing the innerHTML only adds additional stars, even after I've set it to ''. Does anyone have any ideas?</p>
  <p>Thank you!</p>