HTML/CSS/JS弹出计算器打开按钮失效问题排查与修复

以下是导致按钮无法触发弹出功能的三个具体错误及修正方案：

• classlist 拼写错误
  JavaScript中操作元素类列表的正确API是classList（注意L大写），小写的classlist属于未定义属性，会直接导致代码执行失败，无法完成类名添加操作。

• 添加类名时错误携带选择器前缀
  给元素添加类名时，只需要传入类名称字符串即可，不需要带.前缀。错误写法会把.active当作类名本身添加，而非我们需要的active类。正确代码如下：

  calc.classList.add("active")
  overlay.classList.add('active')
  

• CSS选择器层级错误
  .calculator .active表示选择.calculator内部所有带有active类的子元素，但我们需要的是给.calculator自身添加active类后的样式，因此要使用无空格的连写类选择器，表示同时拥有这两个类的元素：

  .calculator.active {
    /* 计算器弹出的样式代码 */
  }
  

修复这些问题后，打开按钮就能正常触发弹出逻辑，你可以直接复用相同的逻辑（修正对应类名拼写和选择器）来实现关闭按钮的功能。

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