jsをhtmlにインポートできません

-1

私はJSとHTMLの絶対的な基礎に着手しようとしています。基本的に私はスーパーシンプルなjsを実行したいです。は、ここに私のtest.jsファイルの：jsをhtmlにインポートできません

document.getElementById("test").innerHTML = "Loaded js file";

は、ここに私のtest.htmlというのです。

<!DOCTYPE HTML> 
<html lang="de"> 
<head> 
<title>Testing page</title> 

<meta charset="utf-8"> 
<script type="text/javascript" src="test.js"></script> 
</head> 
<body> 

    <p id="test">Not loaded</p> 

</body> 
</html>

両方のファイルを同じフォルダに配置されています。起こらなければならないことは、 "読み込まれていない"テキストが "読み込まれたjsファイル"に置き換えられることですが、それは起こりません。私は間違って何をしていますか？

出典

2016-12-12 skulpt

あんたスクリプトが実行されているDOMにロードイベントを待ちますまだ。 –

@empiric元の質問にはjqueryというタグが付けられています。この例では質問に直接jqueryを使用していませんが、それはOPがそれを探していないことを意味するものではありません。 – Daedalus

これは、要素の前にJavaScriptが読み込むためです。あなたには2つの方法があります。

間に合わせの道

移動要素の後にはJavaScript。 JavaScriptでdocumentのloadイベントハンドラを使用し

かを、イベントハンドラを使用して

<!DOCTYPE HTML> 
<html lang="de"> 
    <head> 
    <title>Testing page</title> 
    <meta charset="utf-8" /> 
    </head> 
    <body> 
    <p id="test">Not loaded</p> 
    <script type="text/javascript" src="test.js"></script> 
    </body> 
</html>

。あなたはjQueryのを使用しているので

$(function() { document.getElementById("test").innerHTML = "Loaded js file"; });

、あなたは簡単な方法でそれを保つことができます。

$(function() { $("#test").html("Loaded js file"); });

注：この機能は、ときにのみ実行されますよう私は、上記の方法には、この方法を好みますドキュメントは完全に読み込まれ、邪魔になりません。

出典

2016-12-12 21:04:45

これは、ウィンドウが読み込まれるまで待つ必要があるからです。 DOMのは準備ができている前に、あなたがinnerHTMLを設定するとき

window.onload = function() { 
    document.getElementById("test").innerHTML = "Loaded js file"; 
};

出典

2016-12-12 21:05:13

onloadイベントが正常に機能しない可能性があります。ブラウザは、DOMの構造が解析されたときにimages、css、javascriptファイルなどのすべてのリソースもロードされたときにこのイベントを発生させます。あなたが貧しいネットワーク接続のシナリオでブラウザによってダウンロードされるのを待っている場合は、永遠に重くなるかもしれません。 – Sagi

@サギ私たちはさらに[JQuery相当]（http://stackoverflow.com/questions/799981/document-ready-equivalent-without-jquery）を見ています –

jQueryはこのイベントも使用しますが、サポートするフォールバックメカニズムもありますこのトリックを使用している古いブラウザ：https://github.com/dperini/ContentLoaded/blob/master/src/contentloaded.js – Sagi

スクリプトは、ロードされ、DOMオブジェクト#testまだ存在しません。

ソリューション - 機能onloadでjsコンテンツをラップ：DOMの

window.onload = function() { 
    document.getElementById("test").innerHTML = "Loaded js file"; 
};

出典

2016-12-12 21:05:17 Sojtin

要素が順番に解析されます。
スクリプトも要素です。あなたのケースでは、スクリプト
が解析されていますが、
スクリプトの実行は、ファイルの最後に達するまですべてのHTML解析を停止するため、まだ解析されていません。
そのため、DOMを照会するには、ファイルの最後にスクリプトを置き換える必要があります。

<!DOCTYPE HTML> 
<html lang="de"> 
<head> 
    <title>Testing page</title> 
    <meta charset="utf-8"> 
</head> 
<body> 
    <p id="test">Not loaded</p> 
    <script type="text/javascript" src="test.js"></script> 
</body> 
</html>

または上部にスクリプトを置きますが、これ `＃のtest`要素が存在しない場合、DOMのロードが完了する前に

document.addEventListener("DOMContentLoaded", function() { 
    document.getElementById("test").innerHTML = "Loaded js file"; 
}, false);

出典

2016-12-12 21:06:20 Sagi

なぜいいのかについてもっと説明してください。 –

jsをhtmlにインポートできません

答えて

関連する問題