Javascript仅在html文档中起作用[重复]答案

【问题标题】：Javascript only working when inside the html document [duplicate]Javascript仅在html文档中起作用[重复]
【发布时间】：2017-10-24 21:55:42
【问题描述】：

我一直试图让一个数组填充下拉列表，我从这篇文章中得到了这个例子：JavaScript - populate drop down list with array

我正在使用这个 html：

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

用这个js

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 文档中时才有效，如果我将它放在单独的文件中，它会在 Chrome 中给我这个错误：

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

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

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 文件中时才有效，但如果我将其放在单独的文件中，则会出现该错误。

知道为什么吗？

【问题讨论】：

将代码包装在DOMContentLoaded 中，并在 DOM 元素后引用 JS 文件
你用jquery标记了这个，但似乎没有使用它？

标签： javascript jquery html drop-down-menu

【解决方案1】：

您应该在正文的末尾加载 js 文件。这将确保您正在寻找的元素存在于您的 DOM 中。

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

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

【讨论】：

【解决方案2】：

&lt;script src="filename.js"&gt;&lt;/script&gt;

如果问题仍然存在，请尝试将其添加到 head 标记中，确保您已将 JS 文件放在与 html 文件相同的文件夹中

【讨论】：

你可以看到 JS 正在加载，所以 OP 必须已经加载了 JS。该问题可能与加载脚本时DOM尚未准备好（如其他答案中所述）有关

【解决方案3】：

jQuery方式

$(() => { //dom准备好了，我这里的代码可以访问dom })

【讨论】：

【解决方案4】：

尝试使用

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

【讨论】：