Выпадающая форма Javascript создает диапазон чисел

Я пытаюсь создать диапазон чисел в раскрывающемся списке с использованием JavaScript.Выпадающая форма 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); 
}

источник

2015-03-01 user3128376

Вы добавили скрипт перед HTML в DOM, поэтому элемент select не существует, когда вы пытаетесь его заполнить. – adeneo

Проблема заключается в том, что, когда main.js скрипт обрабатывается и выполняется, не существует ни одного элемента с идентификатором length еще в DOM. Самое простое решение, чтобы переместить ваш скрипт в самом конце 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»). Конечно, вы могли бы сделать то же самое, например. in main.js:

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

В этом случае вам не нужно будет перемещать скрипт в любом месте.

источник

2015-03-01 07:44:54 dfsq

Выпадающая форма Javascript создает диапазон чисел

ответ

Смежные вопросы