JS实现点击弹出表单默认隐藏转显示功能失效问题求助

问题原因 #

1. 你通过样式表给#box设置的display: none属于全局样式规则，JS的element.style.display只能读取元素行内style属性中写的样式，所以初始状态下x.style.display的值是空字符串，和判断条件里的"none"不匹配，原有逻辑无法生效。
2. 原有JS写的是显示/隐藏切换逻辑，不符合你「点击后仅显示、不再隐藏」的需求。

修复方案 #

1. 替换JS逻辑 #

直接把show函数修改为点击直接设置表单显示即可，不需要额外判断：

function show() {
  const x = document.getElementById("box");
  x.style.display = "block";
}

如果要避免重复执行赋值操作，也可以写成带判断的版本：

function show() {
  const x = document.getElementById("box");
  // 用getComputedStyle读取实际生效的样式
  const computedStyle = window.getComputedStyle(x);
  if (computedStyle.display === "none") {
    x.style.display = "block";
  }
}

2. 确认样式配置 #

检查你给#box设置的样式中，确实添加了display: none;规则，保证表单初始是隐藏状态。

额外小问题修复 #

你写的按钮样式里cursor: painter;是无效属性值，改为cursor: pointer;就能实现鼠标悬浮时显示小手的效果了。

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