How do I change an event.target's HTML

Question

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 "favorite" or not:

 <i class="${starStatus} fa-star"></i>

and attached to that a click event:

$('i').click(User.toggleFavorite)

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:

  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 <i class="$far fa-star"></i>
    } else {
      //change the star to be filled: <i class="$fas fa-star"></i>
    }
  }

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?

Thank you!

score 0 · Answer 1 · answered Feb 13 '21 at 02:52

I'm new to js so pls pardon me if my comment is wrong. Since you want to change the star to be either filled (if favorited) or emptied (if unfavorited), I think the order should be

if(isStoryAFavorite){
//change the star to be filled
} else {
//change the star to empty    
    }

I'm not using jquery but found this thread about toggling class in jquery. Hope it gives you hint. jquery change class name

score 0 · Answer 2 · answered Feb 13 '21 at 02:53

Here's an idea to get your stars shining in the right direction.

something like ...

let favStar = document.getElementById('favStar') 
let starred = false

favStar.addEventListener('click', favStatus)
  
function favStatus() {
//if user 'unFavorites'
 if (starred === true) {
 //change icon to empty
 favStar.classList.add(emptyStar)
 favStar.classList.remove(fullStar)
 //change status
 starred = false
 } else {
 //change icon to 
 favStar.classList.add(fullStar)
 favStar.classList.remove(emptyStar)
 // make favorite
 starred = true
 }
}

<span id='favStar' class='emptyStar'>_</span>


<!-- will look like this when clicked
<span id='favStar' class='fullStar'>_</span> -->

if you use font awesome you may not need css but ...

.emptyStar {
  
}
.fullStar {
  
}

className.replace could work too. https://www.w3docs.com/snippets/javascript/how-to-change-an-elements-class-with-javascript.html — trentHarlem, Feb 13 '21 at 03:06

score 0 · Answer 3 · answered Feb 14 '21 at 17:01

Thank you to the answers I got, they got me thinking with classes. I settled on this:

  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){
      star.classList.remove('fas')
      star.classList.add('far')
      User.removeFromFavorites(storyToToggle.storyId)
    } else {
      star.classList.remove('far')
      star.classList.add('fas')
      User.addToFavorites(storyToToggle.storyId)
    }
  }

Works like a charm!

How do I change an event.target's HTML

3 Answers3