获取input元素值时控制台显示空或undefined，求代码问题排查

先来说你代码里出现undefined的核心原因——你用错API啦！

document.getElementsByName("foo")这个方法返回的不是单个input元素，而是一个NodeList类数组对象（简单说就是一堆元素的集合）。你直接给这个集合加.value，就相当于问“一群人里的身高是多少”，肯定得到undefined呀😅。

修正你的代码有两种常用方式： #

1. 从集合里取出第一个元素（因为你页面里只有一个name为foo的input）：

<input name="foo" value="value"> 
<script> 
var text = document.getElementsByName("foo")[0].value; 
console.log(text); // 现在会正常输出"value"
</script>

2. 用querySelector直接定位单个元素（更简洁，推荐）：

<input name="foo" value="value"> 
<script> 
var text = document.querySelector('[name="foo"]').value; 
console.log(text);
</script>

再说说控制台显示为空的可能原因： #

如果是另一种情况（控制台输出空），大概率是这几个问题：

• DOM还没加载完就跑代码了：比如你的script写在input前面，或者页面<head>里，此时浏览器还没渲染到那个input，你获取到的元素是null，自然取不到值。解决办法要么把script放在<body>的最后，要么用事件等DOM加载完成：

document.addEventListener('DOMContentLoaded', function() {
  var text = document.getElementsByName("foo")[0].value;
  console.log(text);
});

• value是动态赋值的，但你提前获取了：如果这个input的value是通过其他JS代码动态设置的，你得确保获取值的代码在赋值之后执行，不然拿到的就是初始的空值。
• 选择器写错了：比如name拼写错了，或者用了getElementById但input根本没加id属性，导致找不到元素，值自然为空。

内容的提问来源于stack exchange，提问作者frosty