HTML点击按钮切换Div显示状态失效问题求助

云原生阿岚

2026-5-15

解决点击按钮无反应问题：显示/隐藏Div的JS修复方案

嘿，我看到你的问题了——点击按钮后完全没反应对吧？核心问题出在函数调用的参数上，咱们一步步来修复：

1. 先搞定最关键的参数错误

你在按钮的onclick里写的是disp(prods,inp)，但JavaScript会把prods和inp当作未定义的变量来处理，而不是你要传递的元素ID字符串。这直接导致函数无法找到对应的DOM元素，自然没效果。

把参数改成带引号的字符串就好：

<button type="button" onclick="disp('prods', 'inp')">Next page</button>

2. 优化显示/隐藏逻辑（更贴合你的CSS设计）

你已经定义了.hidden类来控制元素隐藏，没必要直接修改style.display——用类列表操作更符合语义，也方便后续维护（比如以后要改隐藏样式，只动CSS就行）：

function disp(prodId, inpId) {
  const prodElement = document.getElementById(prodId);
  const inpElement = document.getElementById(inpId);
  prodElement.classList.add('hidden'); // 给prods加上隐藏类
  inpElement.classList.remove('hidden'); // 给inp移除隐藏类
}

3. 完整的修复后代码示例

把所有部分整合起来，就是这样：

.hidden {
  display: none;
}

<div id="prods">
  <form>
    <button type="button" onclick="disp('prods', 'inp')">Next page</button>
  </form>
</div>
<div id="inp" class="hidden">
  <form>
    <!-- 这里放你的输入表单内容 -->
  </form>
</div>

function disp(prodId, inpId) {
  const prodElement = document.getElementById(prodId);
  const inpElement = document.getElementById(inpId);
  prodElement.classList.add('hidden');
  inpElement.classList.remove('hidden');
}