javascript - 第一次单击在 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>

当我第一次单击图标但没有任何改变时。但是在第一次点击后，每次点击代码都运行得很好。所以请解决这个错误。

标签： javascripthtmlcss

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"
  }
})