点击管理员按钮无法显示隐藏表单，JS点击事件失效原因排查

看起来你的问题核心是事件回调里的this指向出错了，导致找不到adminForm元素，没法修改它的display样式。咱们先拆解一下代码里的问题：

问题分析 #

1. this指向混乱：你在addEventListener里用了普通函数作为回调，这时函数内部的this会指向触发点击事件的按钮元素（admin-button），而不是adminMode对象。所以this.adminForm会变成undefined，自然没法修改它的样式。
2. 参数命名混淆：回调函数里的allForm参数其实是事件对象（Event），不是你之前定义的this.allForm变量，这会导致你如果想操作allForm也会出错。
3. 初始状态判断遗漏：如果表单是通过CSS的display:none隐藏的，那么this.adminForm.style.display的初始值是空字符串，直接判断=== 'none'会导致第一次点击不生效。

修复方案 #

下面给出三种可行的修复方式，你可以选自己习惯的一种：

方案1：使用箭头函数（推荐，语法简洁）

箭头函数不会绑定自己的this，会沿用外层作用域的this（也就是adminMode对象）：

var adminMode = {
  init: function() {
    this.adminButton = document.getElementById('admin-button');
    this.adminForm = document.getElementById('admin-form');
    this.allForm = document.getElementById('all-form');
    
    this.adminButton.addEventListener('click', () => {
      // 处理初始为空的情况，确保第一次点击能显示表单
      const currentDisplay = this.adminForm.style.display;
      this.adminForm.style.display = currentDisplay === 'none' || currentDisplay === '' ? 'block' : 'none';
      
      // 如果需要同时操作allForm，直接用this.allForm即可
      // this.allForm.style.display = ...
    });
  }
};

方案2：保存this到变量

在init方法里先把this（也就是adminMode）保存到一个变量（比如self），然后在回调里用这个变量访问属性：

var adminMode = {
  init: function() {
    const self = this; // 保存当前对象的引用
    this.adminButton = document.getElementById('admin-button');
    this.adminForm = document.getElementById('admin-form');
    this.allForm = document.getElementById('all-form');
    
    this.adminButton.addEventListener('click', function() {
      const currentDisplay = self.adminForm.style.display;
      self.adminForm.style.display = currentDisplay === 'none' || currentDisplay === '' ? 'block' : 'none';
    });
  }
};

方案3：用bind绑定this

通过bind方法把回调函数的this强制绑定到adminMode对象：

var adminMode = {
  init: function() {
    this.adminButton = document.getElementById('admin-button');
    this.adminForm = document.getElementById('admin-form');
    this.allForm = document.getElementById('all-form');
    
    this.adminButton.addEventListener('click', function() {
      const currentDisplay = this.adminForm.style.display;
      this.adminForm.style.display = currentDisplay === 'none' || currentDisplay === '' ? 'block' : 'none';
    }.bind(this)); // 绑定this到adminMode
  }
};

额外提醒 #

别忘了在页面加载完成后调用adminMode.init()，否则元素还没渲染，getElementById会返回null：

// 页面加载完成后初始化
document.addEventListener('DOMContentLoaded', function() {
  adminMode.init();
});

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