网站主题切换按钮点击无法切换表情？求代码排查

问题根源 #

你的JavaScript代码存在函数声明语法错误：const clickBtn(){...} 这种写法不符合JS语法规范，浏览器无法识别该函数，导致点击事件完全无法触发。

修正方案 #

将函数声明改为正确的写法，以下三种方式任选其一即可：

方式1：标准函数声明 #

let themeBtn = document.getElementById("theme-btn");
function clickBtn(){
  if (themeBtn.textContent === "🌙") {
    themeBtn.textContent = "💡";
  } else {
    themeBtn.textContent = "🌙";
  }
}
themeBtn.addEventListener("click", clickBtn);

方式2：函数表达式赋值 #

let themeBtn = document.getElementById("theme-btn");
const clickBtn = function(){
  if (themeBtn.textContent === "🌙") {
    themeBtn.textContent = "💡";
  } else {
    themeBtn.textContent = "🌙";
  }
}
themeBtn.addEventListener("click", clickBtn);

方式3：箭头函数 #

let themeBtn = document.getElementById("theme-btn");
const clickBtn = () => {
  if (themeBtn.textContent === "🌙") {
    themeBtn.textContent = "💡";
  } else {
    themeBtn.textContent = "🌙";
  }
}
themeBtn.addEventListener("click", clickBtn);

额外优化建议 #

• 给按钮添加基础样式，提升点击体验：

#theme-btn {
  width: 50px;
  height: 50px;
  border: none;
  border-radius: 50%;
  font-size: 24px;
  cursor: pointer;
  background-color: #f0f0f0;
}

• 如果需要关联页面深色/浅色主题切换，可在函数中扩展逻辑：

const clickBtn = () => {
  if (themeBtn.textContent === "🌙") {
    themeBtn.textContent = "💡";
    document.body.classList.remove("dark-theme");
  } else {
    themeBtn.textContent = "🌙";
    document.body.classList.add("dark-theme");
  }
}

内容的提问来源于stack exchange，提问作者Keyser