如何通过JavaScript在按钮禁用时将其display设为none？

先给你修正后的完整可运行代码：

<form class="next_page" id="nextButton">
  <button disabled="disabled" id="actionButton">
    <span class="material-symbols-outlined" style="font-size: 32px;">arrow_circle_right</span>
  </button>
</form>

<script>
  // 页面加载完成后执行逻辑
  window.addEventListener('load', function() {
    const button = document.getElementById('actionButton');
    
    if (button.disabled) {
      button.style.display = "none";
    } else {
      button.style.display = "block";
    }
  });
</script>

逐个拆解问题根源： #

1. VSCode无代码提示的原因

   • 你写的(button.style.display = "none") & (button.style.display = "block")逻辑完全无效：&是位运算符，同时给同一个属性赋值none和block没有实际意义，VSCode无法识别这种混乱逻辑，自然不会给出提示。
   • 原代码里button变量未定义，VSCode不知道它对应哪个DOM元素，无法识别其属性和方法，所以不会弹出相关提示。

2. 按钮无变化的核心错误

   • HTML结构问题：
     • button标签未闭合（缺少>）；
     • script标签嵌套在button内部，导致JS无法正常执行；
     • font- size写法错误，行内样式必须放在style属性中，正确写法是style="font-size:32px"；
     • form标签不存在type属性，属于无效属性；
     • 按钮不支持onload事件，该事件仅适用于body、window或外部资源标签（如img）。
   • JavaScript语法错误：
     • getElementbyId拼写错误，正确写法是getElementById（注意大写B）；
     • disabeld拼写错误，正确是disabled；
     • if语句缺少闭合括号，正确格式是if (xxx)；
     • button变量未声明，直接使用但未获取对应的DOM元素。

3. 额外优化点

   • 给按钮单独设置id（如actionButton），避免和form的id混淆；
   • 用window.addEventListener('load', ...)确保DOM加载完成后再执行JS，避免获取不到元素的问题；
   • 用const声明变量，明确作用域，VSCode能更好地识别变量类型，给出精准的代码提示。

内容的提问来源于stack exchange，提问作者Glow-coding