IDボタンがあるページの外に置いたときにJSが実行されない

-1

私はモーダルで読み込まれたフォームに連絡しました。私は下のスクリプトをフォームIDが存在するページ内に置くとうまくいきますが、スクリプトを取り出してそれぞれのjsファイルに入れるとDOMが実行されません。コンソールに表示されます："Uncaught TypeError：index.phpでnullのプロパティ 'addEventListener'を読み込めません。IDボタンがあるページの外に置いたときにJSが実行されない

<button id="myBtn"> Contact Us </button> 

<div id="myModal" class="modal"> 
<div class="modal-content"> 
    <span class="close">&times;</span> 

/** form fields**/ 

</div> 
</div> 


var modal = document.getElementById('myModal'); 
var btn = document.getElementById("myBtn"); 
var span = document.getElementsByClassName("close")[0]; 
btn.onclick = function() { 
modal.style.display = "block"; 
} 
span.onclick = function() { 
modal.style.display = "none"; 
} 
window.onclick = function(event) { 
if (event.target == modal) { 
    modal.style.display = "none"; 
} 
}

出典

2017-06-27 Jay Bro

ウィンドウが読み込まれるまで待つ必要があります。要素が存在する前にイベントリスナーをバインドしようとしています。あなたのコードをウィンドウの準備ブロックに入れてください。 – FMashiro

フォームを作成したbodyタグに特定のスクリプトをロードします。試してみてください。 –

1つの変数が1つのファイルで宣言され、別の変数で使用されている場合は、スクリプトの順序にも注意してください（ファイル依存関係の読み込みが完了することを保証するシステムを持たない限り避けてください） – Kaddath

：

window.onload = function(){ 
//enter code here 
}

window.onこの時点で、loadはdocument.readyよりも広いサポートを持っています。

出典

2017-06-27 10:18:28

私は同意します。それが仕事でした。ありがとう –

あなたがでjsのコードを配置する必要があり

$(document).ready(function(){ 
    // here your code, 
    // the document will be loaded 

})

出典

2017-06-27 10:07:35

JQuery ... – Debflav

@Debflav質問は 'jquery'とタグ付けされているので、それはオプションだと思います。 – jeroen

さて、彼はブートストラップ・モーダルを使用しているので、jQueryを使うと思うので、それは分かりません。 – Twisted1919

を見ている必要があります：あなたが考える可能性のjQueryを使用して計画していない場合は

window.onload = function(){ 

//code here 
}

出典

2017-06-27 10:11:14

IDボタンがあるページの外に置いたときにJSが実行されない

答えて

関連する問題