單擊按鈕時如何在圖標之間切換？

Question

我想在啟用或禁用暗模式時在月亮和太陽之間切換。
現在我知道我可以改變一次，但在那之后它就像月亮一樣。

我該如何解決這個問題？

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> 

Answer 1

您可以僅使用 CSS 輕松更改/切換 Drak <=> Light。

只需使用' document.body.classList.toggle('dark-mode'); ' 代碼僅用於切換。 顯示圖標取決於父類。 請看這里的片段：

 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>

也許它有助於解決您的問題。

謝謝

Answer 2

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';
   }
}

Answer 3

您需要記住您是否處於暗模式且變量存儲在函數外部：

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;
  }
}

Answer 4

使用 hasClass 檢查它是否包含類。

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
}

Answer 5

 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>';
}