Why won't my button icon change with my click function?

Issue

I'm new to JavaScript. Why my button won't change from sun to moon color and other works fine, just won't change the icon.

let menu = document.querySelector('#menu-icon');
let navbar = document.querySelector('.nav-menu');

menu.onclick = () => {
  menu.classList.toggle('fa-xmark');
  navbar.classList.toggle('active');
};

let themeButton = document.getElementById('theme-button');

themeButton.onclick = () => {
  themeButton.classList.toggle('fa-moon');

  if (themeButton.classList.contains('fa-moon')) {
    document.body.classList.add('active');
  } else {
    document.body.classList.remove('active');
  }
};

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<div class="nav-right">
  <div><i class="fa-solid fa-bars" id="menu-icon"></i></div>
  <div><i class="fa-solid fa-sun" id="theme-button"></i></div>
</div>

Solution

The code is toggling the class, the icon is not switching because you have two classes fa-sun and fa-moon which are fighting over the same CSS properties. The order/specificity of the rules must make it so fa-sun wins. While in your other one the class you add wins.

You should not rely on the order of the classes in the stylesheet so you should just toggle both classes.

let menu = document.querySelector('#menu-icon');
let navbar = document.querySelector('.nav-menu');

menu.onclick = () => {
  menu.classList.toggle('fa-xmark');
  menu.classList.toggle('fa-bars');
  // navbar.classList.toggle('active');
};

let themeButton = document.getElementById('theme-button');

themeButton.onclick = () => {
  themeButton.classList.toggle('fa-moon');
  themeButton.classList.toggle('fa-sun');

  if (themeButton.classList.contains('fa-moon')) {
    document.body.classList.add('active');
  } else {
    document.body.classList.remove('active');
  }
};

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<div class="nav-right">
  <div><i class="fa-solid fa-bars" id="menu-icon"></i></div>
  <div><i class="fa-solid fa-sun" id="theme-button"></i></div>
</div>

Answered By - epascarello