Why this icon do not change

Question

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

Answer 1

You need to toggle both icons

Try this:
function whatever(burger) {
burger.classList.toggle("fa-bars");
burger.classList.toggle("fa-times");
}

Answer 2

HTML DOM classList Property

https://www.w3schools.com/jsref/prop_element_classlist.asp

Keep learning & happy coding :D

Answer 3

HrCoder thanks it's can work now

Answer 4

HrCoder

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

Answer 5

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 */
}

Answer 6

SoloProg there is no mistakes on classList property

Answer 7

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");
}

Answer 8

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

Answer 9

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

Answer 10

thank you for your answer

Answer 11

Calviղ thanks your answer can work too

Answer 12

EsaKurniawan i think so fa-times is not supporting