CODEWITHSUNDEEP
javascripthtml
David Van der Ham
David Van der Ham

Reputation: 1

how to toggle between icons when a button is clicked?

I want to switch between a moon and a sun when the dark mode is enabled or disabled.
Now I have it that I can change once, but after that it stays as a moon.

How do I fix this this?

function darkmode() {
  document.body.classList.toggle('dark-mode');
   document.getElementById('toggleknop').innerHTML = '<i class="fas fa-moon fa-2x" id="maan" style="color:#737eac;"></i>';
}

<button onclick="darkmode()" id="Knop"> 
  <span id="toggleknop"><i class="fas fa-sun fa-2x" id="zon" style="color:#d8c658;"></i></span>
</button>

Upvotes: 0

Views: 1630

Answers (5)

Ricardo Carvalho
Ricardo Carvalho

Reputation: 413

function darkmode() {
    document.body.classList.toggle('dark-mode');
    document.getElementById('toggleknop').innerHTML = document.body.classList.contains('dark-mode') ? '<i class="fas fa-moon fa-2x" id="maan" style="color:#737eac;"></i>' : '<i class="fas fa-sun fa-2x" id="zon" style="color:#d8c658;"></i>';
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css" rel="stylesheet"/>

<button onclick="darkmode()" id="Knop"> 
  <span id="toggleknop"><i class="fas fa-sun fa-2x" id="zon" style="color:#d8c658;"></i></span>
</button>

function darkmode() {
    document.body.classList.toggle('dark-mode');
    document.getElementById('toggleknop').innerHTML = document.body.classList.contains('dark-mode') ? '<i class="fas fa-moon fa-2x" id="maan" style="color:#737eac;"></i>' : '<i class="fas fa-sun fa-2x" id="zon" style="color:#d8c658;"></i>';
}

Upvotes: 0

Md. Abu Sayed
Md. Abu Sayed

Reputation: 2486

You can change/toggle easily Drak <=> Light only using CSS.

just use 'document.body.classList.toggle('dark-mode');' code only for toggle. show icon depend on the parent class. please see the snippet here:

function darkmode() {
  document.body.classList.toggle('dark-mode');
}
.dark-mode button {
  background: black;
  color: white;
}

.dark-mode .sun-icon,
.moon-icon {
  display: none;
}

.dark-mode .moon-icon {
  display: inline;
}
<button onclick="darkmode()" id="Knop"> 
 click
 <span class="sun-icon">
    sun <i class="fas fa-sun fa-2x" id="zon" style="color:#d8c658;"></i>
  </span>
   <span class="moon-icon">
    moon <i class="fas fa-moon fa-2x" id="maan" style="color:#737eac;"></i>
  </span>
</button>

Maybe it helps to solve your problem.

Thank you

Upvotes: 2

Atk
Atk

Reputation: 752

Use hasClass to check if it contains class.

function darkmode() {
 document.body.classList.toggle('dark-mode');
 var toggleknop=  document.getElementById('toggleknop');
if(toggleknop.hasClass('fa-sun')
{
toggleknop.classList.remove('fa-sun');
toggleknop.classList.add('fa-moon');
//Your styling
}
else if(toggleknop.hasClass('fa-moon') {
toggleknop.classList.remove('fa-moon');
toggleknop.classList.add('fa-sun');//Your styling
}

Upvotes: 0

Rafi
Rafi

Reputation: 824

You need to remember whether you are in dark mode with a variable stored outside the function:

var inDarkMode = false;

function toggleDarkMode() {
  if (inDarkMode) {
    document.body.classList.remove('dark-mode');
    document.getElementById('toggleknop').innerHTML =
      '<i class="fas fa-moon fa-2x" id="maan" style="color:#737eac;"></i>';
    inDarkMode = false;
  } else {
    document.body.classList.add('dark-mode');
    document.getElementById('toggleknop').innerHTML =
      '<i class="fas fa-sun fa-2x" id="zon" style="color:#d8c658;"></i>';
    inDarkMode = true;
  }
}

Upvotes: 0

konuralpt
konuralpt

Reputation: 271

var currentTheme = 'dark';

function changeTheme() {
  document.body.classList.toggle('dark-mode');

  if (currentTheme === 'dark') {
     document.getElementById('toggleknop').innerHTML = '<i class="fas fa-sun fa-2x" id="zon" style="color:#d8c658;"></i>';
     currentTheme = 'sun';
  }else {
     document.getElementById('toggleknop').innerHTML = '<i class="fas fa-moon fa-2x" id="maan" style="color:#737eac;"></i>';
     currentTheme = 'dark';
   }
}

Upvotes: 0

Related Questions