CodePen挑战：onclick控制3D切换按钮样式失效，寻求修复方案

核心问题分析 #

1. 变量作用域冲突：在greenOn和redOn函数内部，你用var on = true/false重新声明变量，这会创建函数局部变量，完全不会修改全局的on状态，导致条件判断永远无法触发。
2. CSS语法错误：box-shadow值里重复写了inset（比如inset -3px ... inset），不符合CSS规范，浏览器无法解析这个无效的阴影值。
3. 缺失初始状态样式：页面加载后，没有给初始激活的绿色按钮设置对应的3D阴影，视觉上没有初始效果。

修复后的完整代码 #

HTML（无需修改）

<!DOCTYPE html>
<html>

<head>
</head>

<body>
  <div class="switch">
    <button class="on" id="on" onclick="greenOn()"></button>
    <button class="off" onclick="redOn()" id="off"></button>
  </div>
</body>

</html>

CSS（无需修改）

.on {
  border-radius: 5px;
  background-color: lime;
  padding: 50px;
  border: none;
}
.off {
  border-radius: 5px;
  background-color: red;
  padding: 50px;
  border: none;
}
.switch {
  padding: 0;
  margin: 0;
}

JavaScript（修复关键问题）

var on = true
const green = document.getElementById('on')
const red = document.getElementById('off')

// 页面加载时设置初始阴影
green.style.boxShadow = 'inset -3px 3px 13px 0px rgba(0,0,0,0.15)'

var greenOn = function() {
  if (on == false) {
    green.style.boxShadow = 'inset -3px 3px 13px 0px rgba(0,0,0,0.15)'
    red.style.boxShadow = 'none'
    // 去掉var，直接修改全局变量
    on = true;
  }
}
var redOn = function() {
  if (on == true) {
    green.style.boxShadow = 'none'
    red.style.boxShadow = 'inset -3px 3px 13px 0px rgba(0,0,0,0.15)'
    // 去掉var，直接修改全局变量
    on = false
  }
}

修复说明 #

• 移除函数内部的var声明，直接修改全局的on变量，确保状态能正确切换，触发对应的样式变更。
• 修正box-shadow的语法，去掉重复的inset，让浏览器能正确解析阴影效果。
• 添加页面加载时的初始阴影设置，让绿色按钮一开始就呈现3D按下的状态，符合初始on = true的逻辑。

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