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'var

上读取null的属性'value'

// 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（）回调（首选解决方案）中，或者移动页面底部的标记。

获取表单字段值并添加到数组

1 个答案: