JavaScript对象引用意外返回null问题排查求助

一眼就能看出问题出在你的HTML代码里！看这段Fortitude对应的input元素：

<input name="txtFOR" type="text" id="txtREF" readonly="readonly" />

你把id属性写错了：name是txtFOR，但id写成了txtREF——这和你JavaScript里document.getElementById("txtFOR")要找的id完全不匹配，所以fortBox自然会返回null。

修复步骤 #

• 修正HTML里的input id，把id="txtREF"改成id="txtFOR"，同时把对应的<label>标签的for属性从txtREF改成txtFOR，修改后的完整代码：

<p>Fortitude: <label for="txtFOR"></label> 
<input name="txtFOR" type="text" id="txtFOR" readonly="readonly" /> 
<label for="txtFORMod"></label> 
<input name="txtFORMod" type="text" id="txtFORMod" readonly="readonly" /> 
<input type="button" name="Btn_ForMinus" id="Btn_ForMinus" value="-" onclick="FNCforSub()" /> 
<input type="button" name="Btn_ForPlus" id="Btn_ForPlus" value="+" onclick="FNCforPlus()"/> 
</p>

额外排查与优化建议 #

• 当遇到xxx is null这类元素获取失败的错误时，优先打开浏览器开发者工具（F12），在Elements面板搜索目标id，确认元素是否存在、id拼写是否完全一致（HTML的id区分大小写）。
• 你当前的元素获取代码可以优化，避免重复调用document.getElementById，比如用一个对象批量存储元素引用，让代码更简洁易维护：

const charElements = {
  strBox: document.getElementById("txtSTR"),
  strModBox: document.getElementById("txtSTRMod"),
  refBox: document.getElementById("txtREF"),
  refModBox: document.getElementById("txtREFMod"),
  fortBox: document.getElementById("txtFOR"),
  forModBox: document.getElementById("txtFORMod"),
  intBox: document.getElementById("txtINT"),
  intModBox: document.getElementById("txtINTMod")
};

后续赋值时就可以用charElements.fortBox.value = charAttsAR[2]这样的写法。

• 注意window.onload = popDefDat()的问题：你这里是立即执行了函数，正确的写法应该是window.onload = popDefDat（不带括号），否则函数会在页面元素还没加载完成时就执行，这也是导致元素获取失败的常见原因。虽然你当前前几个元素能正常初始化，但这个写法隐患很大，一定要修正。

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