JavaScript中element.style.display = 'none'无法隐藏WordPress表单元素问题

• JS加载顺序异常：WordPress默认通常会将自定义JS放到页脚加载，如果你的表单渲染位置早于JS函数定义，触发onkeyup事件时会找不到updateLitres函数导致功能失效。可以将你的JS代码移动到页面头部加载，或是改用DOM加载完成后绑定事件的写法，规避加载顺序问题。
• 字段ID被修改：多数WordPress表单插件、主题会自动给表单字段ID添加前缀/后缀，导致document.getElementById("litres")无法匹配到对应元素。你可以按F12打开浏览器开发者工具，在元素面板确认litres字段的实际ID，替换到代码中即可。
• 其他JS报错阻断执行：页面其他JS代码运行报错会阻塞后续JS执行，你可以切换到开发者工具的Console面板，在dollars输入框中输入内容，查看是否有updateLitres is not defined、Cannot read properties of null等报错，根据报错信息对应修复即可。

优化后的适配代码（无需行内事件绑定，兼容性更强） #

JS代码 #

document.addEventListener('DOMContentLoaded', function() {
  const dollarsInput = document.getElementById('dollars');
  const litresInput = document.getElementById('litres');
  // 先判断两个元素都存在再绑定事件，避免控制台报错
  if (dollarsInput && litresInput) {
    // 用input事件替代keyup，覆盖鼠标粘贴、数值调整等所有输入场景
    dollarsInput.addEventListener('input', function() {
      litresInput.style.display = 'none';
      // 如果你需要根据输入值判断显隐，可以替换成下面的逻辑
      // litresInput.style.display = this.value ? 'none' : 'block';
    });
  }
});

HTML代码（删除原有的行内onkeyup属性） #

<input type="number" id="dollars" name="dollars" min="0" max="1000">
<input type="number" id="litres" name="litres" min="0" max="5000">

如果是在WordPress后台添加代码，记得将JS代码包裹在<script>标签中，放到主题自定义脚本区域、页脚代码插入位置，或是自定义HTML块内，避免被WordPress内容过滤规则删除。

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