2017-07-02 13 views
2
<!DOCTYPE html> 
<html> 

<head> 
    <script> 
     document.getElementById("passage").innerHTML = "Paragraph changed!"; 
    </script> 
</head> 

<body> 

    <div id="passage">hello</div> 
    <div id="question"></div> 
    <div id="answers"></div> 

</body> 

</html> 

なぜdocument.getElementById("passage").innerHTML = "Paragraph changed!"が私のために機能しませんか?私はちょうど元の "こんにちは"でなく、空白の画面で終わる。要素がロードされる前にJavaScriptでinnerhtmlが動作しません

答えて

5

あなたのスクリプトが呼び出され、エレメントがロードされる前に

<!DOCTYPE html> 
<html> 
    <head> 
    </head> 
    <body> 
     <div id="passage">hello</div> 
     <div id="question"></div> 
     <div id="answers"></div> 
     <script> 
     document.getElementById("passage").innerHTML = "Paragraph changed!"; 
     </script> 
    </body> 
</html> 
+0

は、それが動作するようになりました!ありがとう。 –

+0

@SrinivasMLコードブロックで余分なスペースを削除してみてください。また、スニペットとして作成することもできます。 –

-2

あなたのスクリプトを呼び出している負荷要素の後にスクリプトを呼び出してみてください。あなたがコンソールをチェックすると、HTMLページが解析され、トップダウンで実行されているエラー

Uncaught TypeError: Cannot set property 'innerHTML' of null

を見ることができます

(function(){ 
document.getElementById("passage").innerHTML = "Paragraph changed!"; 
}) 
+1

なぜそれが投票されたのですか? – techhunter

+0

ベストプラクティス上の理由から、コードをドキュメントの一番下に置いた方がよいでしょう。また、jQueryはこの質問で決して言及されませんでした。 –

+1

私はあなたの最初の点を得ていませんでした。 2番目の点については、jqueryとjsの両方を投稿しました。 – techhunter

3

$(document).ready(function() 
{ 
    document.getElementById("passage").innerHTML = "Paragraph changed!"; 
    }); 

JSをお試しください。

したがって、あなたが言及している要素が何であるかは特定できません。

だから、あなたは、イベントリスナーを使用するか、単にbodyタグの終わり

方法1イベントリスナ

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
</head> 
 
<script> 
 
window.onload=function(){ 
 
    document.getElementById("passage").innerHTML = "Paragraph changed!"; 
 
}; 
 
</script> 
 
<body> 
 

 
<div id = "passage">hello</div> 
 
<div id = "question"></div> 
 
<div id = "answers"></div> 
 

 
</body> 
 
</html>

方法2前にスクリプトを配置する必要があり、次のいずれかのスクリプトはちょうどですボディータグの上に

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
</head> 
 

 
<body> 
 

 
<div id = "passage">hello</div> 
 
<div id = "question"></div> 
 
<div id = "answers"></div> 
 
<script> 
 
document.getElementById("passage").innerHTML = "Paragraph changed!"; 
 
</script> 
 
</body> 
 
</html>

1

スクリプトは、ページがロードされた後に実行する必要があります。
それ以外の場合は、ページのすべての要素が参照されたときに、DOMにアタッチされていない可能性があります。

よりもむしろ(あなたは常にスクリプトの順序に注意する必要があります)エラーが発生しやすいかもしれ要素宣言の後にスクリプトを移動するには、DOMが完全にロードされた後に実行されるように設計された イベントを使用することができます。 bodyの例えば
onload属性:私は見

<body onload='document.getElementById("passage").innerHTML = "Paragraph changed!";'> 
関連する問題