EJS模板中按钮onclick事件失效问题求助

你的明暗切换按钮在EJS中失效主要有几个关键问题，逐一解决就能恢复功能：

1. EJS模板中onclick属性的错误写法 #

你在按钮里写的onclick= <%“darkMode()”%>完全错误，EJS的输出语法是用来渲染服务器端变量的，但darkMode()是前端浏览器执行的函数，不需要用EJS包裹，直接写onclick="darkMode()"即可。

2. 服务器端函数与前端函数混淆 #

最初你把darkMode()放在<% %>标签里，这会让函数在Node.js服务器端执行，而不是在浏览器的前端环境中，浏览器根本访问不到这个函数。必须把函数放在<script>标签内，让它成为前端可执行的代码。

3. CSS属性大小写错误 #

CSS中所有属性都是小写的，你写的Display会被浏览器忽略，必须改成display，否则图标切换和样式变化都不会生效。

4. 按钮类型的不必要默认行为 #

按钮用type="submit"会触发表单提交（哪怕没有表单），可能干扰点击事件，改成type="button"更合适。

修正后的完整代码 #

index.ejs

<body>
  <button type="button" onclick="darkMode()" class="myBtn">
    <span class="moon-icon">🌙</span> 
    <span class="sun-icon">☀️</span> 
  </button>

  <script>
    function darkMode(){
      document.body.classList.toggle('dark');
    }
  </script>
</body>
</html>

CSS文件

button{
  background-color: green;
}
.dark button{
  background-color: yellow;
}

.dark .moon-icon, .sun-icon{
  display: none;
}
 
.dark .sun-icon{
  display: inline;
}

app.js（无需修改）

app.get("/", function(req, res){
  res.render("index");
});

这样修改后，按钮点击就能正常切换明暗模式了。

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