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

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 >
  <div><i  id="menu-icon"></i></div>
  <div><i  id="theme-button"></i></div>
</div>

CodePudding user response：

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 >
  <div><i  id="menu-icon"></i></div>
  <div><i  id="theme-button"></i></div>
</div>

CodePudding user response：

You are adding/removing the fa-moon class on click. But you also need to remove/add the fa-sun class at the same time. If both class names are present, the class with higher specificity will be used.

 themeButton.onclick = () => {
  //This will remove `fa-moon` class if it's already there, add if not.
  themeButton.classList.toggle('fa-moon');
  //You need to do the same for `fa-sun` class. Otherwise, the class never gets removed
  themeButton.classList.toggle('fa-sun');

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

CodePudding user response：

Just toggle CSS classes on the body element (like .is-darkMode or .is-menuOpen).
Change your Fa-icons using the appropriate icon's HEX code in the ::before pseudo:

const el = (sel, par) => (par||document).querySelector(sel);

const elBody = el("body");

const toggleDarkMode = () => elBody.classList.toggle("is-darkMode");
const toggleMenuOpen = () => elBody.classList.toggle("is-menuOpen");

el("#theme-btn").addEventListener("click", toggleDarkMode);
el("#menu-icon").addEventListener("click", toggleMenuOpen);

/* DEFAULT STYLES (LIGHT MODE) */
body { background: #eee; transition: background 0.4s, color 0.4s; }
#menu-nav { display: none; }

/* DARK MODE STYLES: */
.is-darkMode { background: #444; color: #fff; }
.is-darkMode #theme-btn::before { content: "\f186"; } /* Moon icon */

/* MENU OPEN STYLES: */
.is-menuOpen #menu-nav { display: block; }
.is-menuOpen #menu-icon::before { content: "\f00d"; } /* × icon */

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">

<div >
  <div><i  id="theme-btn"></i></div>
  <div><i  id="menu-icon"></i></div>
</div>

<div id="menu-nav">MENU GOES HERE</div>