开发者问题收集

未捕获的类型错误：无法将属性“hidden”设置为 null

2020-11-30
4813
javascript forms

我有一个下拉菜单，当从该下拉菜单中选择“其他”值时，它应该触发一个名为其他位置的输入表单字段以显示在 UI 中。当代码运行时，它到达 document.getElementById('otherPosition').hidden = false; 我收到上述错误。为什么 id 为空？

HTML： 

<div class="column" id="otherPosition" hidden>
                <div style="padding-right: 10px;">
                    <label for="signeeContact.otherPosition">Other Position</label>
                    <input type="text" value="{{_contract.signeeContact.otherPosition::input}}" placeholder="Other Position" />
                </div>
            </div>

函数： 

_displayOtherPositionField(val) {
                if (val != undefined) {
                    if (val == "28") {
                        document.getElementById('otherPosition').hidden = false;
                    }
                }
            }
2个回答

有点晚了，但我遇到了同样的错误。也许其他人可以从中受益。当我在头部写入 <script src="index.js"></script> 时，我遇到了此错误。 

<head>
    <title>My Website</title>
    <meta charset="utf-8">
    <script src="index.js"></script>
</head>

经过研究，我发现它可能会返回 null，因为它试图在 html 完全加载之前访问它。当我将脚本导入移至正文末尾时，我的问题就解决了。 

<body>
   <div id="test">
   </div>

   <script src="index.js"></script>
</body>
Muhammet İkbal
2023-09-07

在这里它工作正常。这意味着如果您设法以类似的方式链接您的元素，它也应该正常工作。所以问题可能来自其他地方。 

function displayOtherPositionField() {
let val = document.getElementById('test').value
  if (val != undefined) {
    if (val == "2") {
      document.getElementById('otherPosition').hidden = false;
    }
  }
}
<div class="column" id="otherPosition" hidden>
  <div style="padding-right: 10px;">
    <label for="signeeContact.otherPosition">Other Position</label>
    <input type="text" value="{{_contract.signeeContact.otherPosition::input}}" placeholder="Other Position" />
  </div>
</div>

<select name="numbers" id="test" onchange="displayOtherPositionField()">
  <option value="1">1</option>
  <option value="2">2</option>
</select>

显示 div#otherPosition 的另一种方法可能是使用 CSS document.getElementById('otherPosition').style.display = "block" ，而其默认值为 none

BeHFaR
2020-11-30