Question

我尝试使用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);
}

Answer 1

问题是当解析并执行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事件上执行脚本部分（在右侧面板中，下拉列表＆＃34; onLoad＆＃34;）。当然，你也可以这样做，例如在main.js中：

window.onload = function() { /* previous main.js code */};

在这种情况下，您无需在任何地方移动脚本。

下拉表单Javascript创建一系列数字

1 个答案: