Получите значение поля формы и добавьте в массив

Question

несколько новых для javascript и столкнулись с проблемой во время эксперимента, чтобы помочь мне изучить этот материал. У меня есть поля формы, которые я хочу получить, и поместить их значения в массив - кажется достаточно простым, и он работает в консоли в Chrome, но не тогда, когда я пытаюсь запустить все это из файла javascript.

Вот мой JavaScript:

// Create empty array for field names 
var fields = []; 
// Create empty array for field values 
var words = []; 


//Add field IDs to array 'fields' - creates ['word-0','word-1','word-2'] 
for(var i = 0; i < 3; i+= 1){ 
    var myField = "word-" + i; 
    fields.push(myField); 
} 

//Function to add field values to an array 
function getValue(name){ 
    var fieldValue = document.getElementById(name).value; 
    if(fieldValue != ""){ 
     // If the field has a value, add it to the 'words' array 
     words.push(fieldValue); 
     return words; 
    }else{ 
     return 'No value in field'; 
    } 
} 

Когда я вызываю функцию непосредственно в моей JavaScript, я получаю ошибку говоря не удается прочитать свойство «значение» нуль на вар в «fieldValue»

// Doesn't work 
getValue(fields[0]); 

// Even this doesn't work 
getValue('word-0'); 

Однако, если я оставлю вызов функции из своего сценария и просто запустил его с консоли в chrome, он работает так, как ожидалось, и не вызывает никаких ошибок.

If run from within chrome console, both of these work: 
// Works 
getValue(fields[0]); 

// Works 
getValue('word-0'); 

Спасибо за любые идеи относительно того, почему это не работает.

PS. Мне бы очень понравилось решение для ванильного JavaScript, без jQuery.

Answer 1

Я думаю, вы не дождались готовности DOM. Включив скрипт непосредственно в HTML, код будет выполнен немедленно. Если вы помещаете его в HEAD, например (плохая практика, должна быть помещена перед закрытием), скрипт будет запущен до того, как будет проанализирован HTML. Поэтому document.getElementById(name) вернет null (поскольку браузер об этом не знает). И именно поэтому он работает при вызове с консоли (браузер знает обо всей странице).

Чтобы исправить это, оберните свой код внутри обратного вызова domReady() (предпочтительное решение) или переместите тег в нижней части страницы.