Why cant I overwrite blue with red?

Question

https://code.sololearn.com/W6WE81Uzi300/#js
in this code, as you can see, there are two buttons, one for making the text red and one for making it blue. If I press the button "red text", the text will be red, and if I press the button "blue text", the text will overwrite red and it will turn blue, but if i first press the "blue text" button, so the text will be blue, and after that press the "red text" button, the text won't turn red, unless i press the "blue text" button again, so the text will turn black and after that press the "red text" button so the text will turn blue

Answer 1

It should be noted that an element can have multiple classes so the text will be both red and blue the way you coded it.

Answer 2

If the text has the blue class, it will be blue regardless of the state of the red class. If you swap the .red style to follow the .blue, red would win as it would be the last seen.

Answer 3

The toggleClass function add when there is no certain class, and remove class when element has certain class. So you add class, but do not remove other class. The solution of your problem may be look like this
https://code.sololearn.com/Wm5v6WInQkaC/?ref=app