Youtube Buttons

Question

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

Answer 1

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

Answer 2

Hope this helps you

https://code.sololearn.com/WwGRcabta1zJ

Answer 3

That's a good question YourMom, let's hear what others' has to say, we can both learn something 👍

Answer 4

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

Answer 5

hey Ipang and Your Mom , is here any flask developer? i was thinking to make a chatting server but it's hard to make it alone, can anyone help?
flask, postgresql or any other db, html +css +js ... anyone can help?

Answer 6

Ipang okey, thanks : (

Answer 7

Good

Answer 8

What was supposed to happen when the <i> was clicked?

Answer 9

When i click the fa fa-thumbs-o-up it is supposed to be fa fa-thumbs-up basically

Answer 10

Then don't use toggle(), directly set the class name instead ...

thumbsUp.className = "fa fa-thumbs-up";

Answer 11

But u can only click it once then

Answer 12

Okay so, Ipang why does my bell not show?

https://code.sololearn.com/W0IzPE8TWvJR/?ref=app

Answer 13

Ipang ?

Answer 14

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

Answer 15

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

Answer 16

I didn't get what you mean ...
"color is transparent and when you click it color is transparent" 🙄

Answer 17

Basically i wanr the bell to be like my thumbs up button with the same concept

Answer 18

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

Answer 19

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”);?

Answer 20

Because "fa-bell" and "fa-bell-o" refer to different class.

The two lines toggle different classes, don't you see?