Fontawesome can't change the class because of invalid string characters

Question

const toggleDarkOrLight = document.getElementsByTagName('i')[0];
var toggled = false;
const toggle = () => {
  if (toggled === false) {
    toggleDarkOrLight.classList.remove('fa fa-toggle-off');
    toggleDarkOrLight.classList.add('fa fa-toggle-on');
  } else {
    toggleDarkOrLight.classList.remove('fa fa-toggle-on');
    toggleDarkOrLight.classList.add('fa fa-toggle-off');
  }
}

<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<i class="fa fa-toggle-off" onclick="toggle()"></i>
</body>
<html>

Why can't I change the class? Is it because of the "-" character

What should I try instead then?

Also, how can I make the toggle on and off like a smooth animation (or I can't?)

score 0 · Answer 1 · answered Feb 02 '21 at 16:59

No, it's the space. classList.add/.remove expect a single class name and a class name may not contain a space. In order to add/remove multiple classes, but them in separate arguments:

toggleDarkOrLight.classList.remove('fa', 'fa-toggle-off');
toggleDarkOrLight.classList.add('fa', 'fa-toggle-on');

(Or just leave faout, since you are both adding and removing it.)

score 0 · Accepted Answer · answered Feb 02 '21 at 17:02

It's the space( ) thats interfering!

Since your adding, and removing the fa class, just let it be.

That said, consider using classList.contains to check witch class you want to toggle.

const toggleDarkOrLight = document.getElementsByTagName('i')[0];

const toggle = () => {
  if (toggleDarkOrLight.classList.contains('fa-toggle-off')) {
    toggleDarkOrLight.classList.remove('fa-toggle-off');
    toggleDarkOrLight.classList.add('fa-toggle-on');
  } else {
    toggleDarkOrLight.classList.remove('fa-toggle-on');
    toggleDarkOrLight.classList.add('fa-toggle-off');
  }
}

<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<i class="fa fa-toggle-off" onclick="toggle()"></i>
</body>
<html>

score 0 · Answer 3 · answered Feb 02 '21 at 17:03

You don't actually want to toggle the fa part at all. You only want to toggle the fa-toggle-off/on part. Here is how your code should look:

const toggleDarkOrLight = document.getElementsByTagName("i")[0];
      var toggled = false;
      const toggle = () => {
        if (toggled === false) {
          toggleDarkOrLight.classList.remove("fa-toggle-off");
          toggleDarkOrLight.classList.add("fa-toggle-on");
          toggled = true;
        } else {
          toggleDarkOrLight.classList.remove("fa-toggle-on");
          toggleDarkOrLight.classList.add("fa-toggle-off");
          toggled = false;
        }
      };

<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<i class="fa fa-toggle-off" onclick="toggle()"></i>
</body>
<html>

Fontawesome can't change the class because of invalid string characters

3 Answers3