关于jquery：Javascript仅在html文档内部工作


Javascript only working when inside the html document

本问题已经有最佳答案，请猛点这里访问。

我试着让一个数组填充下拉列表，我从下面的文章中得到了这个例子：javascript-用数组填充下拉列表

我正在使用此HTML:

1
2
3
 <select id="selectNumber">
 <option>Choose a number</option>
 </select>

用这个JS

1
2
3
4
5
6
7
8
9
10
var select = document.getElementById("selectNumber");
var options = ["1","2","3","4","5"];

for(var i = 0; i < options.length; i++) {
var opt = options[i];
var el = document.createElement("option");
el.textContent = opt;
el.value = opt;
select.appendChild(el);
}?

但只有当我将JS放在HTML文档中时，它才起作用，如果我将JS放在单独的文件中，它会在chrome中给出这个错误：

1
>Uncaught TypeError: Cannot read property 'appendChild' of null  at g.js:8

我也尝试过这个，但同样的事情发生了：

1
2
3
4
5
6
7
8
9
10
var select = document.getElementById("selectNumber");
var options = ["1","2","3","4","5"];

for(var i = 0; i < options.length; i++) {
var opt = options[i];
var el = document.createElement("option");
el.text = opt;
el.value = opt;
select.add(el);
}?

只有当我把代码放在HTML文件中时，代码才起作用，但是如果我把它放在一个单独的文件中，它就会给我这个错误。

你知道为什么吗？

相关讨论

您应该在主体的末尾加载JS文件。这将确保您要查找的元素存在于您的DOM中。

这可以通过使用就绪检查来避免。本机JavaScript示例：

1
2
3
document.addEventListener("DOMContentLoaded", function(event) {
  //do work
});

尝试使用

1
2
3
$( document ).ready(function() {
   //set your code
});

jQuery方法

$(())= {//DOM就绪，我这里的代码可以访问DOM})

1
<script src="filename.js">

如果问题仍然存在，请尝试在head标记中添加此项。确保已将JS文件与HTML文件放在同一文件夹中。

相关讨论