第一次單擊在 javascript 中無法用於操作 DOM 元素

Question

我正在研究一個 JavaScript 項目，我需要在暗模式和亮模式之間切換。 HTML 在這里。

 var btnToggle = document.getElementById("btn-toggle") var btnToggleIcon = document.getElementById("btn-toggle-icon") var isDark = true; btnToggleIcon.addEventListener("click", () => { if (isDark) { console.log(btnToggle.style) btnToggle.style.justifyContent = "flex-start"; isDark = false; document.documentElement.style.setProperty('--color1', '#10111f'); document.documentElement.style.setProperty('--bg1', 'linear-gradient(145deg, #111221, #0e0f1c)'); document.documentElement.style.setProperty('--color5', '#f1f1f3'); document.documentElement.style.setProperty('--bs', '9px 9px 23px #0f111a, -9px -9px 20px #1a1b32'); document.getElementById("toggle-img").src = "https://img.icons8.com/ios/2x/moon-man.png" } else { console.log(btnToggle.style) btnToggle.style.justifyContent = "flex-end"; isDark = true; document.documentElement.style.setProperty('--color1', '#f1f1f3'); document.documentElement.style.setProperty('--bg1', '#f1f1f3'); document.documentElement.style.setProperty('--color5', '#10111f'); document.documentElement.style.setProperty('--bs', '20px 20px 60px #bebebe,20px 20px 60px #ffffff'); document.getElementById("toggle-img").src = "https://img.icons8.com/fluent-systems-regular/2x/sun.png" } })

 :root { --color1: #10111f; --color2: #6c6c76; --color3: #265385; --color4: #6bc3ff; --color5: #f1f1f3; --bg1: linear-gradient(145deg, #111221, #0e0f1c); --bs: 9px 9px 23px #0f111a, -9px -9px 23px #1a1b32; }.keyboard { width: 80vw; height: 52vh; background-color: var(--color1); position: absolute; left: 10vw; right: 10vw; bottom: 5%; display: flex; align-items: center; justify-content: center; flex-direction: column; padding: 10px; }.btn { color: var(--color5); font-size: 1.3rem; cursor: pointer; border-radius: 8px; background: var(--bg1); box-shadow: var(--bs); padding: 1rem 1.8rem; transition: all 0.2s ease; }

 <div class="btn-toggle" id="btn-toggle"> <div class="btn-toggle-icon" id="btn-toggle-icon"> <img id="toggle-img" src="https://img.icons8.com/ios/2x/moon-man.png" alt="" /> </div> </div>

當我第一次單擊圖標但沒有任何改變時。 但是在第一次點擊后，每次點擊代碼都運行得很好。 所以請解決這個錯誤。

Answer 1

你的邏輯是錯誤的。 您需要在檢查之前更改變量。

btnToggleIcon.addEventListener("click", () => {
  isDark = !isDark;
  if (isDark) {
    console.log(btnToggle.style)
    btnToggle.style.justifyContent = "flex-start";
    document.documentElement.style.setProperty('--color1', '#10111f');
    document.documentElement.style.setProperty('--bg1', 'linear-gradient(145deg, #111221, #0e0f1c)');
    document.documentElement.style.setProperty('--color5', '#f1f1f3');
    document.documentElement.style.setProperty('--bs', '9px 9px 23px #0f111a, -9px -9px 20px #1a1b32');
    document.getElementById("toggle-img").src = "https://img.icons8.com/ios/2x/moon-man.png"
  } else {
    console.log(btnToggle.style)
    btnToggle.style.justifyContent = "flex-end";
    document.documentElement.style.setProperty('--color1', '#f1f1f3');
    document.documentElement.style.setProperty('--bg1', '#f1f1f3');
    document.documentElement.style.setProperty('--color5', '#10111f');
    document.documentElement.style.setProperty('--bs', '20px 20px 60px #bebebe,20px 20px 60px #ffffff');
    document.getElementById("toggle-img").src = "https://img.icons8.com/fluent-systems-regular/2x/sun.png"
  }
})

Answer 2

您誤解了 state，您的if(isDark)檢查之前的 state。

即如果isDark == true那么你應該將 icon 更改為 sun

 var btnToggle = document.getElementById("btn-toggle") var btnToggleIcon = document.getElementById("btn-toggle-icon") var isDark = true; btnToggleIcon.addEventListener("click", () => { if (isDark) { isDark = false; //at this point it's not dark document.getElementById("toggle-img").src = "https://img.icons8.com/fluent-systems-regular/2x/sun.png" } else { isDark = true; //at this point it's dark document.getElementById("toggle-img").src = "https://img.icons8.com/ios/2x/moon-man.png" } })

 <div class="btn-toggle" id="btn-toggle"> <div class="btn-toggle-icon" id="btn-toggle-icon"> <img id="toggle-img" src="https://img.icons8.com/ios/2x/moon-man.png" alt="" /> </div> </div>