7

I have the code as here in this jsfiddle, I want the font awesome icon to change on button click using javascript, but it does'nt seem to work. I'm new to javascript so please forgive me if this was a dumb question.

HTML

<button id="favBtn" onclick="fav();">
    <i id="favIcon" class="fa fa-star-o"></i>&nbsp;Favourite
</button>

Javascript

function fav() {
    document.getElementById("favIcon").toggleClass('fa-star-o fa-star');
}

7 Answers 7

18

When using jQuery you never need to use an inline attribute eventHandler.

onclick=

  • Demo 1 uses jQuery .toggleClass()

  • Demo 2 uses JavaScript .classList.toggle()

  • Demo 3 uses CSS :checked pseudo-class

Update v4 to v5: Go to Start | Font Awesome. There are some class changes as well. See Demo 4.

Demo 1 -- jQuery

$('button').on('click', fav);

function fav(e) {
  $(this).find('.fa').toggleClass('fa-star-o fa-star');
}
:root {
  font: 400 16px/1.5 Verdana;
}

button {
  display: inline-block;
  font: inherit;
  padding: 0px 5px;
  cursor: pointer;
}

button::after {
  content: ' Favorite'
}
<link href='https://cdn.jsdelivr.net/fontawesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'>

<button>
    <i class="fa fa-star-o"></i>
</button>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Demo 2 -- Plain JavaScript

document.querySelector('button').addEventListener('click', fav);

function fav(e) {
  const tgt = e.target.firstElementChild;
  tgt.classList.toggle('fa-star');
  tgt.classList.toggle('fa-star-o');
}
:root {
  font: 400 16px/1.5 Verdana;
}

button {
  display: inline-block;
  font: inherit;
  padding: 0px 5px;
  cursor: pointer;
}

button::after {
  content: ' Favorite'
}
<link href='https://cdn.jsdelivr.net/fontawesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'>

<button>
  <i class="fa fa-star-o"></i>
</button>

Demo 3 -- Pure CSS

:root {
  font: 400 16px/1.5 Verdana;
}

#fav {
  display: none
}

#fav+label {
  display: inline-block;
  border: 2px outset grey;
  padding: 0px 5px;
  cursor: pointer;
  -webkit-appearance: button;
  -moz-appearance: button;
  appearance: button;
}

#fav+label::after {
  content: ' Favorite'
}

#fav+label>.fa-star-o {
  display: inline-block
}

#fav+label>.fa-star {
  display: none;
}

#fav:checked+label>.fa-star-o {
  display: none;
}

#fav:checked+label>.fa-star {
  display: inline-block
}
<link href='https://cdn.jsdelivr.net/fontawesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'>

<input id='fav' type='checkbox'>
<label for='fav'>
  <i class="fa fa-star-o"></i>
  <i class="fa fa-star"></i>
</label>

Demo 4 -- Font Awesome 5

jQuery / JavaScript / CSS

/* #1 jQuery */
$('button.jq').on('click', jQFav);
function jQFav(e) {
  $(this).find('.fa-star').toggleClass('fas far');
}

/* #2 JavaScript */
document.querySelector('button.js').addEventListener('click', JSFav);
function JSFav(e) {
  const tgt = e.target.firstElementChild;
  tgt.classList.toggle('far');
  tgt.classList.toggle('fas');
}
/* #1 JS / #2 jQ */
:root {
  font: 400 16px/1.5 Verdana;
}

button {
  display: inline-block;
  font: inherit;
  padding: 0px 5px;
  cursor: pointer;
}

button::after {
  content: ' Favorite'
}

/* #3 CSS */

#fav {
  display: none
}

#fav+label {
  display:inline-block;
  border: 2px outset grey;
  padding: 0px 5px;
  cursor: pointer;
  -webkit-appearance: button;
  -moz-appearance: button;
  appearance: button;
}

#fav+label::after {
  content: ' Favorite'
}

#fav+label>.far {
  display: inline-block;
}

#fav+label>.fas {
  display: none;
}

#fav:checked+label>.far {
  display: none;
}

#fav:checked+label>.fas {
  display: inline-block
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" crossorigin="anonymous">

<ol>
<li><fieldset>
<legend>jQuery</legend>

<button class='jq'>
  <i class='fa-star far'></i>
</button>

</fieldset></li>

<li><fieldset>
<legend>Plain JavaScript</legend>

<button class='js'>
  <i class='fa-star far'></i>
</button>

</fieldset></li>

<li><fieldset>
<legend>Pure CSS</legend>

<input id='fav' type='checkbox'>
<label for='fav'>
  <i class="fa-star far"></i>
  <i class="fa-star fas"></i>
</label>

</fieldset></li>
</ol>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

2
  • some how the Demo2 is broken, could you please fix it. Commented Jan 8, 2018 at 20:56
  • Good catch thanks @Bhramar . It works with Chrome but not Firefox apparently, so I made it more simple by removing the <i> and made the <button> e.target instead.
    – zer00ne
    Commented Jan 8, 2018 at 23:44
6

.toggleClass() is a jQuery function and you're using it as JavaScript. Try this:

$("#favIcon").toggleClass('fa-star-o fa-star');
3

Difster's response is correct. Here is how you can accomplish the same thing using native JavaScript:

document.getElementById("favIcon").classList.toggle('fa-star-o');
document.getElementById("favIcon").classList.toggle('fa-star');
1

Additionally with what Difster said, .toggleClass is a jQuery function.

Beyond that, I wouldn't use the DOM to define bindings to functions; Using jQuery's event listener system will allow for more maintainable and understandable code:

https://jsfiddle.net/0n1n9o9n/2/

$(document).ready(function() {
  $('#favBtn').on('click', function() {
    $("#favIcon").toggleClass('fa-star-o fa-star');
  });
});
0

I would split my comment into multiple remarks:

1/ As mentioned in the other comments: $("#favIcon").toggleClass('fa-star-o fa-star'); This is a mix of JS and JQuery calls. If you want to use pure JS you would use:

document.getElementById("favIcon").classList.toggle('fa-star-o');

If you want to use JQuery you can use () As mentioned in Difster's comment:

$("#favIcon").toggleClass('fa-star-o');

2/ As mentioned already in the comments, it's better to attach an event listener.

Your Fiddle js would look like this:

document.getElementById("favBtn").addEventListener("click", fav);
function fav() {
    document.getElementById("favIcon").classList.toggle('fa-star-o');
    document.getElementById("favIcon").classList.toggle('fa-star');
}

And remove the "onClick" on the HTML since you would be attaching a js event listener.

Links to check: JQuery toggleClass - js classList

0

Hope It Helps

$('.fa-star').click(function() {
  $(this).toggleClass('fas far');
})
 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz" crossorigin="anonymous">


<script src="https://unpkg.com/jquery/dist/jquery.min.js"></script>

 
 
 
 
 
 <i class="far fa-star"></i>

-1

You can use only Javascript:

 function fav() {
    var icon = document.getElementById("favIcon");
      if (icon.classList.contains("fa-star-o")) {
        icon.classList.remove("fa-star-o");
        icon.classList.add("fa-star");
    } else {
       icon.classList.remove("fa-star");
       icon.classList.add("fa-star-o");
    }
 }

example

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.