Question

我已联系我们以模态加载的表单。当我将下面的脚本放在表单id所在的页面中时，它工作正常但是当我取出脚本并将它们放在相应的js文件中时，DOM无法执行..我在控制台中看到它显示： “未捕获的TypeError：无法在index.php中读取null的属性'addEventListener'”。

<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";
 }
}

Answer 1

你应该看看

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

})

Answer 2

你应该把js代码放在：

window.onload = function(){

//code here
}

Answer 3

如果您不打算使用jQuery，可以考虑：

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

此时，window.onload比document.ready具有更广泛的支持。

当放在id按钮所在的页面之外时，JS不会执行

3 个答案: