Why this icon do not change | Sololearn: Learn to code for FREE!

+1

Why this icon do not change

But if i replace fa-times with something else it's work. example When i replace fa-times with fa-thumbs-up it's work https://code.sololearn.com/WCtP0SWzc18r/?ref=app

9/17/2021 1:27:02 PM

EsaKurniawan

12 Answers

New Answer

+5

You need to toggle both icons Try this: function whatever(burger) { burger.classList.toggle("fa-bars"); burger.classList.toggle("fa-times"); }

+2

HTML DOM classList Property https://www.w3schools.com/jsref/prop_element_classlist.asp Keep learning & happy coding :D

+2

HrCoder thanks it's can work now

+2

HrCoder I put the link "classList property" for general use in websites.

+1

EsaKurniawan u can try this function whatever(burger) { if (burger.classList.contains('fa-bars')) { burger.classList.remove('fa-bars') burger.classList.add('fa-times'); } else { burger .classList.remove('fa-times') burger.classList.add('fa-bars'); } /* here is the problem */ }

+1

SoloProg there is no mistakes on classList property

+1

Html <i id="oke" class="fa fa-bars"></i> Js let oke = document.getElementById("oke"); oke.addEventListener('click', function(){ whatever(this); }); function whatever(burger) { burger.classList.toggle("fa-bars"); burger.classList.toggle("fa-times"); }

+1

The icon will not change because fa-bars has precedence over fa-times and precedence is the reason it changes when you switch to fa-thumbs-up but in this case, fa-thumbs-up has precedence over fa-bars. Fa Icon Cheatsheet https://fontawesome.com/v4.7/cheatsheet/ This is the case for all of the fa icons, when you add another icon to i elements classList one of the icons will have precedence over the other, and the icon with the highest will be displayed https://code.sololearn.com/Wb5mqKgVlhSA

0

But why when i replace fa-times with fa-thumbs-up it's can work

0

thank you for your answer

0

Calviղ thanks your answer can work too

-1

EsaKurniawan i think so fa-times is not supporting