+ 1
Youtube Buttons
I cant find the error in the code I looked it up on w3schools and i dont know whats wrong https://code.sololearn.com/W0IzPE8TWvJR/?ref=app
32 odpowiedzi
+ 5
Oh so you want to switch it on each click. You could've explained it in the post's Description though, so we can go straight up to fixing the actual problem ...
The class "fa fa-thumbs-o-up" and "fa fa-thumbs-up" are combination of classes separated by space. That's why we get an error when we try to toggle by those classes. Class toggling apparently only supports single class name, so ... skip the "fa " and only toggle either "fa-thumbs-o-up" or "fa-thumbs-up"
thumbsUp.classList.toggle( "fa-thumbs-up" );
+ 2
Hope this helps you
https://code.sololearn.com/WwGRcabta1zJ
+ 2
That's a good question YourMom, let's hear what others' has to say, we can both learn something 👍
+ 1
It might help if you log <Bell>'s class name after toggling the two classes, to see why two class' toggle was there.
function bell(Bell)
{
Bell.classList.toggle( "fa-bell-o" );
Bell.classList.toggle( "fa-bell" );
console.log( Bell.className );
}
+ 1
Ipang okey, thanks : (
+ 1
Good
0
What was supposed to happen when the <i> was clicked?
0
When i click the fa fa-thumbs-o-up it is supposed to be fa fa-thumbs-up basically
0
Then don't use toggle(), directly set the class name instead ...
thumbsUp.className = "fa fa-thumbs-up";
0
But u can only click it once then
0
Okay so, Ipang why does my bell not show?
https://code.sololearn.com/W0IzPE8TWvJR/?ref=app
0
Ipang ?
0
From recent search I found that, FA 5 has extended the class "fa" to "far", "fas", "fab" etc depending on which CSS stylesheet was used.
Since you use FA 4, "far" class is not available yet, and you should rather use plain "fa"
<i onclick="bell(this)" class='fa fa-bell'></i>
+ Where I read about it ...
https://stackoverflow.com/questions/24922833/fontawesome-icons-are-not-showing-why
0
Ye but how do i make it like a bell like my thumbs up where the colof is transparent to the background and when you click it the color isnt transparent if that makes sense
0
I didn't get what you mean ...
"color is transparent and when you click it color is transparent" 🙄
0
Basically i wanr the bell to be like my thumbs up button with the same concept
0
Aah now I get it, so it seems the "-o" has the same effect, but I don't know *for sure* whether this will work for all FA icons.
+ So in HTML
<i onclick="bell(this)" class='fa fa-bell-o'></i>
+ In JS
function bell(Bell)
{
Bell.classList.toggle( "fa-bell-o" );
Bell.classList.toggle( "fa-bell" );
}
0
Okay, sick! Ons question tho, in my js for my thumbs up i only have thumbsUp.classList.toggle(…); you know but why do i need
Bell.classList.toggle(“fa-bell-o”); and
Bell.classList.add(“fa-bell”);?
0
Because "fa-bell" and "fa-bell-o" refer to different class.
The two lines toggle different classes, don't you see?