全局DOM变量切换类时触发Cannot read properties of null错误咨询

原代码 #

JavaScript

let buttonsend = document.querySelector(".button");

function buttonSendnotavailable() {
  buttonsend.classList.remove("button");
  buttonsend.classList.add("disabledButtonsend");
  buttonsend = false;
}

function buttonSendavailable() {
  buttonsend.classList.remove("disabledButtonsend");
  buttonsend.classList.add("button");
  buttonsend = true;
}

function() {
  buttonSendnotavailable();
  buttonSendavailable();
}

HTML

<input type="button" class="button"> </input>

问题分析及修正方案 #

原代码没法直接实现需求，报错和功能失效的原因及解决方法如下：

• DOM加载时机错误：如果JS代码在HTML按钮元素之前执行，document.querySelector(".button")会返回null，后续访问classList自然触发报错。解决方式是把JS代码放在HTML末尾，或者用DOMContentLoaded事件包裹，确保DOM加载完成后再获取元素。
• 错误覆盖DOM元素变量：你在buttonSendnotavailable里把buttonsend设为false，直接把存储DOM元素的变量改成了布尔值，后续调用buttonSendavailable时，buttonsend已经不是DOM元素，自然读不到classList。绝对不能修改这个变量的类型，要始终保留它的DOM元素引用。
• 匿名函数未执行：最后那个function() {...}是未命名的闲置函数，没有被调用，里面的切换逻辑根本不会运行。
• HTML标签写法错误：<input>是自闭合标签，不需要写</input>，改成<input type="button" class="button">即可。

可正常运行的修正代码 #

HTML

<input type="button" class="button">

JavaScript

document.addEventListener('DOMContentLoaded', function() {
  let buttonsend = document.querySelector(".button");

  function buttonSendnotavailable() {
    buttonsend.classList.remove("button");
    buttonsend.classList.add("disabledButtonsend");
  }

  function buttonSendavailable() {
    buttonsend.classList.remove("disabledButtonsend");
    buttonsend.classList.add("button");
  }

  // 测试切换逻辑
  buttonSendnotavailable();
  // 延时2秒切回可用状态，方便查看效果
  setTimeout(buttonSendavailable, 2000);
});

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