CODEWITHSUNDEEP
javascripthtml
user3128376
user3128376

Reputation: 994

Dropdown form Javascript create a range of numbers

I'm trying to create a range of numbers in a dropdown form using JavaScript.

However, it looks like

…and it does not show any options and clicking on the arrow does not pop up more options. I already checked that my path is correct.

I tried it in JSFiddle and it works but not when I put it in my HTML.

I'm going crazy on why this is not working.

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);
}

Upvotes: -1

Views: 2554

Answers (1)

dfsq
dfsq

Reputation: 193311

The problem is that when main.js script is parsed and executed, there is no element with id length yet in DOM. The simplest solution is to move your script to the very end of body tag:

<!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>

The reason why it works in jsFiddle, is because it's configured so that script section is executed on window.onload event (in the right side-panel, dropdown "onLoad"). Of course, you could do the same, e.g. in main.js:

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

In this case you would not need to move script anywhere.

Upvotes: 2

Related Questions