Question

document.getElementById('blocks').value = blocks; 出现错误

2019-12-18

202

javascript html

好的，我很久以前就尝试过这个，但从来没有发生过。

如果我这样做

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

Uncaught TypeError: Cannot set property 'value' of 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>

Answer 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>

Answer 2

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

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

Answer 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>