127

エラーまたは Uncaught TypeError: Cannot set property 'innerHTML' of null が表示されるのはなぜですか? 私は innerHTML を理解し、以前は動作していたと思っていました。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>

<script type ="text/javascript">
    what();
    function what(){
        document.getElementById('hello').innerHTML = 'hi';
    };
</script>

</head>

<body>
<div id="hello"></div>
</body>
</html>
4

21 に答える 21

213

helloスクリプトがロードされたときに存在するように、スクリプトの前に divを配置する必要があります。

于 2013-08-14T18:31:30.680 に答える
4

setTimeout メソッドを使用して、HTML が最初に読み込まれるようにすることができます。

于 2016-08-22T17:27:44.867 に答える
4

これが私のスニペットです。私はそれがあなたに役立つことを願っています. 

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
</head>

<body>
  
<div id="hello"></div>
  
<script type ="text/javascript">
    what();
    function what(){
        document.getElementById('hello').innerHTML = 'hi';
    };
</script>
</body>
</html>

于 2015-05-23T05:28:21.187 に答える
1

このエラーは、html レンダリングの終了後にスクリプトをロードしても表示されることがあります。この例では、あなたのコード

<div id="hello"></div>

div 内には値がありません。内部で変更する値がないため、エラーが発生します。だったはず

<div id="hello">Some random text to change</div>

それから。

于 2019-01-23T21:33:45.163 に答える
0

jqueryを追加します< head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

$document.ready() を使用 します: コードは< head>main.js のような別のファイルまたは別のファイルに含めることができます

1) 同じファイルで js を使用 (これを に追加< head>):

<script>
$( document ).ready(function() {
function what(){
    document.getElementById('hello').innerHTML = 'hi';
};
});
</script>

2) main.js のような他のファイルを使用します (これを に追加します< head>):

<script type="text/javascript" src="/path/to/main.js" charset="utf-8"></script>

main.jsファイルにコードを追加します:)

于 2016-10-09T21:08:58.937 に答える
0

間違いなく、ここでの答えのほとんどは正しいですが、これを行うこともできます。

document.addEventListener('DOMContentLoaded', function what() {
   document.getElementById('hello').innerHTML = 'hi';  
});
于 2020-05-28T10:57:22.860 に答える
0

私と同じ問題を抱えている可能性のある人のためにこれを追加したいだけです。

私の場合、以下に示すように、閉じた div がありませんでした

   <!DOCTYPE HTML>
   <html>
   <head>
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
   <title>Untitled Document</title>
   </head>
   <body>
   <div> //I am an open div
    <div id="hello"></div>
   <script type ="text/javascript">
       what();
       function what(){
          document.getElementById('hello').innerHTML = 'hi';
       };
   </script>
   </body>
   </html>

閉じた div がない場合、子から親へ、または親から子への横断が混乱する可能性があるため、DOM 内の要素にアクセスしようとするとエラーが発生する可能性があります

于 2020-07-15T04:24:31.583 に答える