如何用JavaScript和CSS切换配色？按钮多次点击失效求助

问题根源 #

你代码里的按钮和内部SVG都绑定了点击事件，而且按钮上的onclick写法存在错误：

• 按钮标签写的是onclick="darkLight"，缺少括号，原本不会触发函数，但SVG里的onclick="darkLight()"会正常执行
• 点击按钮（包括SVG区域）时，事件冒泡会让按钮和SVG的点击事件同时触发，等于连续调用两次darkLight()，isdark变量来回切换两次，视觉上就表现为按钮没反应。

修复步骤 #

1. 移除重复的点击事件：删掉SVG标签里的onclick="darkLight()"，只在按钮上绑定事件
2. 修正按钮的onclick写法：把onclick="darkLight"改成onclick="darkLight()"，确保函数能被正确调用

修复后的完整代码 #

HTML #

<div class="header">
<img src="https://www.youtube.com/s/desktop/c1d331ff/img/favicon_48x48.png">
  <button class="lightdark" onclick="darkLight()">
    <svg viewBox="0 0 512 512" width="20" title="adjust">
  <path d="M8 256c0 136.966 111.033 248 248 248s248-111.034 248-248S392.966 8 256 8 8 119.033 8 256zm248 184V72c101.705 0 184 82.311 184 184 0 101.705-82.311 184-184 184z" />
</svg>
    <p>Adjust colors</p>
  </button>
</div>
<div class="body">
  <p>Lorem ipsum</p>
</div>

JavaScript（可选优化） #

把var换成let/const，代码更规范：

const root = document.querySelector(':root');
let isDark = 0;
function darkLight() {
  if (isDark === 0) {
    root.style.setProperty('--backgroundcolor', '#1a1a1a');
    root.style.setProperty('--bodycolor', '#3b3b3b');
    root.style.setProperty('--fontcolor', 'white');
    isDark = 1;
  } else {
    root.style.setProperty('--backgroundcolor', '#d4d4d4');
    root.style.setProperty('--bodycolor', '#f2f2f2');
    root.style.setProperty('--fontcolor', 'black');
    isDark = 0;
  }
}

CSS（修正拼写错误） #

你CSS里的font-famliy是拼写错误，改成font-family才能让字体设置生效：

@import url('https://fonts.googleapis.com/css2?family=Lexend&family=Nunito&display=swap');
:root {
  --maincolor: #ed1818;
  --backgroundcolor: #d4d4d4;
  --bodycolor: #f2f2f2;
  --fontcolor: black;
}
body {
  background-color: var(--backgroundcolor);
  font-family: Nunito, sans-serif;
  color: var(--fontcolor);
  padding: 20px;
}
.body {
  background-color: var(--bodycolor);
  border-radius: 5px;
  padding: 10px 30px;
}
.header {
  padding: 20px 0px;
}
button {
  border: 0;
  border-radius: 5px;
  background-color: var(--backgroundcolor);
  font-family: Nunito, sans-serif;
  color: var(--fontcolor);
  padding: 10px;
  transition-duration: 0.2s;
}
button:hover {
  background-color: var(--bodycolor);
  cursor: pointer;
}

额外优化建议 #

可以去掉内联onclick，用事件监听绑定，代码结构更清晰：

document.querySelector('.lightdark').addEventListener('click', darkLight);

然后把HTML按钮里的onclick="darkLight()"删掉即可。

内容的提问来源于stack exchange，提问作者Really Bad Dev