新手求助：JavaScript点击切换input元素显隐功能失效

你的代码存在两个核心问题，导致点击按钮后input无法正常隐藏：

1. 重复绑定点击事件：按钮同时通过onclick属性和addEventListener绑定了clickMe函数，每次点击会触发两次函数执行。第一次点击把input的display设为none，第二次执行又立刻把它改回block，视觉上就看不到隐藏效果。
2. 初始样式判断逻辑有漏洞：页面加载时，input的内联style.display是空值（你没在HTML里给它设置内联display样式），第一次进入函数时input.style.display == "none"不成立，会执行input.style.display = "none"，但因为函数被触发两次，马上又会执行input.style.display = "block"，导致input始终显示。

修复方案1：移除重复事件绑定 #

只保留addEventListener的绑定，去掉按钮上的onclick属性，同时完善初始状态的判断：

修复后的HTML：

<form>
  <label for="button"></label>
  <fieldset>
    <ol>
      <li><button type="button">Click me!</button></li>
      <li><input type="text" name="popup" id="popup" placeholder="placeholder"></li>
    </ol>
  </fieldset>
</form>

注：form标签可以正常使用，只要按钮type设为button就不会触发表单提交，不需要注释掉

修复后的JavaScript：

document.addEventListener("DOMContentLoaded", load);

function load() {
  let button = document.querySelector("button");
  button.addEventListener("click", clickMe);
}

function clickMe() {
  let input = document.getElementById("popup");
  // 同时判断初始空值和none状态
  if (input.style.display === "none" || input.style.display === "") {
    input.style.display = "block";
  } else {
    input.style.display = "none";
  }
}

修复方案2：用getComputedStyle获取实际样式（更可靠） #

如果input的display样式是通过外部CSS设置的，用getComputedStyle能准确获取当前实际的显示状态，避免内联样式为空的问题：

function clickMe() {
  let input = document.getElementById("popup");
  const actualDisplay = window.getComputedStyle(input).display;
  if (actualDisplay === "none") {
    input.style.display = "block";
  } else {
    input.style.display = "none";
  }
}

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