document.getElementById（“ numbern”）。value导致未捕获的TypeError：无法读取未定义的属性'value'

Question

我正在尝试从输入框中获取价值。 ID是正确的，并显示输入。 在控制台中，显示

UncaughtTypeError Uncaught TypeError：无法读取未定义的属性'value'并链接到第41行，但我认为一切正确。

HTML

<input id="numbern" name="nub" placeholder="Your Roll No." class="form-control col-6" autocomplete="off">

JavaScript

docsd=document.getElementById('numbern');
console.log(docsd.value);

我能知道我在做什么吗？

Answer 1

因为我的声誉不允许我发表评论，所以我必须在这里说。当我尝试使用jquery手动将元素添加到DOM时，遇到了类似的情况。因此，正如@CBroe所建议的，请找出执行js的时间以及元素绝对不存在的时间。 您可以使用 F12按钮打开Goog​​le控制台以检查元素是否存在：

希望它可以帮助您找到出路。我在此代码段中找不到任何问题，因此与js执行时间相比，它更可能与您呈现html的方式及其发生时间有关。

-----更新-------

根据您的代码摆弄，您绝对应该像在DOM正文后面一样向下移动脚本

---------测试---------

如您所见，我已经在Google浏览器上进行了测试，并且可以正常运行。我可以获取元素并对其进行操作，在顶部脚本中注释getElementById（“ numbern”）之后，没有错误。

Answer 2

在调用选择器之前，请确保该元素存在于DOM中。 document.ready可用于等待文档对象首先加载。以下代码段效果很好：

function getValue() {
  
  docsd = document.getElementById('numbern');
  console.log(docsd.value);

};
document.addEventListener('DOMContentLoaded', getValue(), false);

<input id="numbern" name="nub" placeholder="Your Roll No." class="form-control col-6" value="10" autocomplete="off">

Answer 3

使用此代码，它将在您更改输入框中的值之后侦听事件，它将执行console.log

`let docsd = document.getElementById（'numbern'）;

docsd.addEventListener（“ input”，（）=> { console.log（docsd.value）;
}）`