エラーまたはUncaught TypeErrorが発生するのはなぜですか:プロパティ 'innerHTML'を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>
スクリプトのロード時に存在するように、hello
divをスクリプトの前に配置する必要があります。
アクション「onload」を実行するようにJavaScriptに指示する必要があります...これを試してください:
<script type ="text/javascript">
window.onload = function what(){
document.getElementById('hello').innerHTML = 'hi';
};
</script>
すべての技術者が問題を解決する方法についてのソリューションを提供していることがわかりますが、そもそもなぜそれが起こっているのかという理由や根本原因に対応している人はいません。
エラーまたはUncaught TypeErrorが発生するのはなぜですか:プロパティ 'innerHTML'をnullに設定できませんか?
ブラウザは常にHTML DOM全体を上から下にロードします。 script
タグ(HTMLファイルのhead
セクションにある)内に記述されたJavaScriptコードは、DOM(bodyタグ内にあるさまざまなHTML要素タグ)がロードされる前であっても、ブラウザーのレンダリングエンジンによって実行されます。 head
タグに存在するスクリプトは、DOMで実際にレンダリングされる前であっても、ID hello
を持つ要素にアクセスしようとしています。そのため、明らかにJavaScriptが要素を認識できなかったため、null参照エラーが表示されます。
以前のようにどのように機能させることができますか?
ユーザーが初めてページにアクセスするとすぐに、ページに「こんにちは」メッセージを表示します。したがって、DOMが完全にロードされ、hello
id要素がアクセス可能/利用可能であるという事実を完全に確信した時点で、コードを接続する必要があります。次の2つの方法で実現できます。
hello
id要素を含むDOMが既に読み込まれた後にのみスクリプトが起動されます。すべてのDOM要素の後、つまりbody
タグが終了している一番下にあるスクリプトタグを移動するだけで実現できます。レンダリングは上から下に行われるため、スクリプトは最後に実行され、エラーは発生しません。 <!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>
window.onload
イベントを介してイベントベースのフックを提供し、ブラウザがDOMのロードを完了したというヒントを提供します。したがって、このイベントが発生する頃には、hello
idの要素がすでにDOMにロードされており、その後この要素にアクセスしようとするJavaScriptが失敗することはありません。そのため、以下のコードスニペットのようなことを行います。 この場合、head
タグ内のHTMLドキュメントの最上部にスクリプトが存在しても、スクリプトは機能します。<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<script type ="text/javascript">
window.onload = function() {
what();
function what(){
document.getElementById('hello').innerHTML = 'hi';
};
}
</script>
</head>
<body>
<div id="hello"></div>
</body>
</html>
JSをwindow.onload
に入れるだけです
window.onload = function() {
what();
function what() {
document.getElementById('hello').innerHTML = 'hi';
};
}
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Example</title>
</head>
<body>
<div id="hello"></div>
<script type ="text/javascript">
what();
function what(){
document.getElementById('hello').innerHTML = '<p>hi</p>';
};
</script>
</body>
</html>
Javascriptが良さそうです。 divが読み込まれた後に実行してみてください。ドキュメントの準備ができたときにのみ実行してください。 jqueryの$(document).ready
。
ページが読み込まれたらJavaScriptパーツを実行する必要があるため、JavaScriptスクリプトを本文タグの最後に配置することをお勧めします
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Example</title>
</head>
<body>
<div id="hello"></div>
<script type ="text/javascript">
what();
function what(){
document.getElementById('hello').innerHTML = 'hi';
};
</script>
</body>
</html>
SetTimeoutメソッドを使用して、htmlが最初に読み込まれるようにすることができます。
ここに私のスニペットがあります。私はそれがあなたに役立つことを願っています。
<!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>
このエラーは、htmlレンダリングが終了した後にスクリプトをロードした場合でも表示される可能性があります。この例では、コード
<div id="hello"></div>
div内に値がありません。そのため、内部で変更する値がないため、エラーが発生します。あるべきだった
<div id="hello">Some random text to change</div>
その後。
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ファイルにコードを追加します:)
<!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>
div
をp
に変更する必要があります。技術的にinnerHTMLとは、<??? id=""></???>
部分の中にあることを意味します。
変化する:
<div id="hello"></div>
に
<p id="hello"></p>
やること:
document.getElementById('hello').innerHTML = 'hi';
変わるだろう
<div id="hello"></div> into this <div id="hello">hi</div>
実際には意味がありません。
変更することもできます:
document.getElementById('hello').innerHTML = 'hi';
これに
document.getElementById('hello').innerHTML='<p> hi </p> ';
それを機能させるために。
私は同じ問題を抱えていましたが、ヌルエラーは、作業していたhtmlを保存していないためであることがわかりました。
参照された要素がページがロードされたときに保存されていない場合は、ロード時にドキュメントに含まれていないため、「null」になります。 window.onloadを使用すると、デバッグにも役立ちます。
これがお役に立てば幸いです。
根本的な原因:ページ上のHTMLはJavaScriptコードの前にロードする必要があります。 2つの方法で解決する:
1)jsコードの前にHTMLの読み込みを許可します。
<script type ="text/javascript">
window.onload = function what(){
document.getElementById('hello').innerHTML = 'hi';
}
</script>
//or set time out like this:
<script type ="text/javascript">
setTimeout(function(){
what();
function what(){
document.getElementById('hello').innerHTML = 'hi';
};
}, 50);
//NOTE: 50 is milisecond.
</script>
2)HTMLコードの下でjsコードを移動する
<div id="hello"></div>
<script type ="text/javascript">
what();
function what(){
document.getElementById('hello').innerHTML = 'hi';
};
</script>