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

Posted 2023-02-22

【中文标题】Javascript仅在html文档中起作用[重复]

【英文标题】：Javascript only working when inside the html document [duplicate]

【发布时间】：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标记了这个，但似乎没有使用它？

【参考方案1】：

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

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

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

【参考方案2】：

<script src="filename.js"></script>

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

【讨论】：

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

【参考方案3】：

jQuery方式

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

【参考方案4】：

尝试使用

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