document.getElementById('blocks').value = blocks;给出错误答案

【问题标题】：document.getElementById('blocks').value = blocks; is giving an errordocument.getElementById('blocks').value = blocks;给出错误
【发布时间】：2019-12-18 16:36:44
【问题描述】：

好吧，我很久以前曾经尝试过，但以前从未发生过。

如果我这样做了

var blocks = 0;
document.getElementById('blocks').value = blocks;

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

<!DOCTYPE html>
<html>
<head>
    <title>Home</title>
    <link rel="stylesheet" href="/css/Index.css">
    <script src="/js/Index.js"></script>
</head>
<body>
    <input type = "text" id="blocks"/>
</body>
</html>

【问题讨论】：

这能回答你的问题吗？ Where is the ideal place to load javascripts in html?

标签： javascript html

【解决方案1】：

尝试将脚本移动到正文的底部。执行时元素不存在。

<head>
    <title>Home</title>

    <link rel="stylesheet" href="/css/Index.css">

</head>

<body>
    <input type = "text" id="blocks"/>
    <script src="/js/Index.js"></script><!-- here-->

</body>

【讨论】：

【解决方案2】：

如果您的脚本保存在其自己的 JS 文件中（即不是作为 HTML 中的 <script> 标记），则在加载文档之前您无法访问 DOM 元素。因此，将您的代码包装在 onload 事件处理程序中：

document.onload = function() {
    var blocks = 0;
    document.getElementById('blocks').value = blocks;
}

【讨论】：

使用window.addEventListener('load', function() { //... }); 添加新的事件侦听器被认为是“更好”的做法，而不是通过直接分配。顾名思义，这会添加一个新的侦听器（而不是指定一个确定的侦听器）。

【解决方案3】：

尝试将<script> 标记放在<body> 元素的末尾，以确保在调用脚本时可以访问该元素：

<!DOCTYPE html>
<head>
    <title>Home</title>
    <link rel="stylesheet" href="/css/Index.css">
</head>
<body>
    <input type = "text" id="blocks"/>
    <script src="/js/Index.js"></script>
</body>

【讨论】：

【解决方案4】：

将脚本加载到页脚部分或正文的最末端而不是头部。您的脚本在加载 DOM 之前执行或在加载事件下调用指定的语句。

【讨论】：

【解决方案5】：

这是失败的，因为您的脚本在 DOM 完成渲染之前正在运行。您应该始终将 DOM 操作脚本放在 document.onload 函数中，该函数在 DOM 完成加载后运行。

此外，您应该始终检查 NPE (NullPointerException)；养成一个好习惯：

document.onload = () => {
  const element = document.getElementById('blocks');
  if (element) {
    element.value = 0;
  } else {
    // consider publishing some warning
    console.error("Could not find element #blocks");
  }
}

【讨论】：

如果另一个脚本也尝试监听文档加载事件，这不会很好。所以document.addEventListener('load', function() { //... }) 会是更好的选择……

【解决方案6】：

正如其他人所建议的，确保脚本在元素加载后运行的常见做法是将脚本标签移动到正文的底部，在元素本身之后。然而，更现代的方法是在你的脚本标签上使用defer 属性：这样可以确保在你的 DOM 加载之前脚本不会加载，但你不必担心标签在页面中的相对位置您将要操作的 DOM 元素。所有现代浏览器都支持它，甚至 IE10+。

所以只需将defer 添加到您现有的<script> 标签上，一切都会正常工作:)

【讨论】：