我正在尝试使用 JavaScript 在下拉表单中创建一系列数字。
但是，看起来像
...并且它不显示任何选项，并且单击箭头不会弹出更多选项。我已经检查过我的路径是否正确。
我在 JSFiddle 试过了它可以工作，但当我将其放入 HTML 中时却不起作用。
我对为什么这不起作用感到疯狂。
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="../stylesheets/main.css">
<script type="text/javascript" src="../assets/main.js"></script>
</head>
<body id="gradient">
<div id="down" class="center">
<p >Word Size</p>
<select id="length">
</select>
</div>
</body>
</html>
main.js
var select = document.getElementById('length');
for (var i = 0; i<= 24; i++){
var option = document.createElement('option');
option.value = i;
option.innerHTML = i;
select.options.add(option);
}
最佳答案
问题在于，当解析并执行 main.js 脚本时，DOM 中还没有 id length 的元素。最简单的解决方案是将脚本移动到 body 标记的最末尾:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="../stylesheets/main.css">
</head>
<body id="gradient">
<div id="down" class="center">
<p >Word Size</p>
<select id="length"></select>
</div>
<script type="text/javascript" src="../assets/main.js"></script>
</body>
</html>
它在 jsFiddle 中工作的原因是因为它被配置为在 window.onload 事件(在右侧面板中，下拉菜单“onLoad”)上执行脚本部分。当然，你也可以这样做，例如在 main.js 中:
window.onload = function() { /* previous main.js code */};
在这种情况下，您不需要将脚本移动到任何地方。
关于javascript - 下拉表单 Javascript 创建一系列数字，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28791268/