2016-12-24 14 views
0

外部JSファイルが正しく読み込まれています。外部JSファイル - イベントリスナー

私はそのファイルの中にボタンにイベントリスナーを追加する関数を持っています。

私はそのファイルの中に、イベントがトリガされたときに呼び出されるはずの関数も持っています。

だから我々はしている: HTML

<input type="submit" id="subBtn" value="POST ARTICLE"> 

    <script> 
     eventListeners(); 
    </script> 

JSファイル

function eventListeners(){ 
document.getElementById("subBtn").addEventListener("click",newContent); } 

newContentは()これが失敗したJSファイル

の内側にもあります。

<input type="submit" onclick="newContent();" value="POST ARTICLE"> 

それは動作します:

私は、私はそうのような入力にイベントリスナーを置くとすることを、しかし気づきました。

なぜですか?そして、私は自分自身をどうやって修正するのですか

事前に感謝します。

+0

ここにはJavaScriptファイルが含まれていますか? –

答えて

0

eventListeners()呼び出しをbody onload関数に移動してみてください。これがうまくいくと、要素が文書にロードされる前にスクリプトが起動します。このような

何か - あなたのJSファイルを含めている

<body onLoad="eventListeners();"> 
0

?要素自体の前にそれを含める場合、要素がまだロードされていないため、イベントリスナーを追加できません。通常、スクリプトを本文の最後に含めることがベストプラクティスです。 JSハンドラで追加する前にドキュメントがロードされるまでJSを待機させることも賢明です。

function newContent(){ 
    // function 
} 

function eventListeners(){ 
    document.getElementById("subBtn").addEventListener("click",newContent); 
} 

// Wait until the document is ready 
document.addEventListener("DOMContentLoaded", function() { 
    eventListeners(); 
}); 
関連する問題