2017-02-10 17 views
1

JavascriptコードはHTMLに埋め込まれていますが、HTML内に埋め込むのではなくJSスクリプトの外部にリンクしたいのですが、定義される前に関数が実行された場合にグローバル変数やローカル変数の問題が発生しますこのコードを外部から実行するにはどうすればよいですか?

この問題のヘルプはありますか?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> 
<html lang="en"> 
<head> 
    <title>JavaScript label example</title> 
    <style> 
    p { 
     font-family: 'helvetica neue', helvetica, sans-serif; 
     letter-spacing: 1px; 
     text-transform: uppercase; 
     text-align: center; 
     border: 2px solid rgba(0,0,200,0.6); 
     background: rgba(0,0,200,0.3); 
     color: rgba(0,0,200,0.6); 
     box-shadow: 1px 1px 2px rgba(0,0,200,0.4); 
     border-radius: 10px; 
     padding: 3px 10px; 
     display: inline-block; 
     cursor: pointer; 
    } 
    </style> 
</head> 
<body> 
    <p>Player 1: Chris</p> 
</body> 
<script> 
var para = document.querySelector('p'); 
para.addEventListener('click', updateName); 
function updateName() { 
    var name = prompt('Enter a new name'); 
    para.textContent = 'Player 1: ' + name; 
} 
</script> 

</html> 

私はhtmlページの下部にある<script src="js/script.js"></script>を入れているだろう推測していますか?それが定義されて た前

いない場合、私はエラーに

を取得するには 'updateName' が使用されました。 para.addEventListener( 'click'、updateName);

'プロンプト'が定義される前に使用されました。 var name = prompt( ' 新しい名前を入力してください');

+2

スクリーンショットを投稿するのではなく、質問にコードをコピーして貼り付けてください。 –

+5

私は分かりません。あなたはそれを外部のスクリプトに入れて何か問題があると思いますか?あなたが同じ順序でそれらをロードする限り、それはHTMLでそれを書いた場合とまったく同じ**です。 –

+0

[ページ読み込み後に実行されるJavascript]の重複可能性があります(http://stackoverflow.com/questions/807878/javascript-that-executes-after-page-load) –

答えて

1

デフォルトでは、scriptのタグは、ソースコードの表示順に評価されます。 scriptタグを外部ファイルから同じコードを読み込むタグに置き換えることは、同等でなければなりません。

headでスクリプトを参照する場合は、defer attributeを使用してください。

+0

スクリプトタグを外部タグに置き換えるときは、同じ場所にある必要がありますか? – Shire

+1

@Shire - ドキュメント内の '

4

'updateName'が定義される前に使用されました。 para.addEventListener( 'click'、updateName);

あなたのコード:

para.addEventListener('click', updateName); 
function updateName() { 

あなたはそれを定義する前に、回線上でそれを使用します。

ホイストは、実際的な効果はありませんが、あなたの糸くずツールは、それが悪いスタイルだとみなします。

'プロンプト'が定義される前に使用されました。 var name = prompt( '新しい名前を入力してください');

promptはWeb APIです。 JavaScript自体の一部ではありません。あなたのリンティングツールは、JavaScriptがブラウザで実行されることを期待するように設定されていません。あなたはそれを再設定する必要があります。

+0

あなたは* 'updateName'が定義される前に*使用されていたと言いましたが、これをテストしても問題はありません。 –

+0

@FarzinKanzi関数宣言は、コードが実行される前にメモリに[hoisted](https://developer.mozilla.org/en-US/docs/Glossary/Hoisting)されます。つまり、実用的な観点からは重要ではありません関数が宣言されている場所。 – csm

+1

@csm、もしあなたが本当にあなたを理解すれば、私はあなたの言うことを言った。 *関数が宣言されている場所は関係ありません。* –

関連する問題