前端表单开发疑问：为何第一种方式无法获取secondLetter输入值？

我来帮你搞清楚这两种写法的差异，其实核心是什么时候获取输入框的值的问题～

第一种写法为什么拿不到值？ #

当页面刚加载完成时，你就执行了这两行代码：

let firstLetter = document.querySelector('#firstLetter').value;
let secondLetter = document.querySelector('#secondLetter').value;

这时候用户还没在输入框里输入任何内容，所以secondLetter被赋值成了空字符串。关键在于：这个变量只是存储了当时的静态值，和输入框本身没有绑定关系。之后用户输入的内容不会自动同步到这个变量里，所以当你在submit事件里打印它时，输出的还是页面加载时的空值。

第二种写法为什么可行？ #

你这里的写法有两个关键点：

1. 浏览器会自动把表单内带有id/name的元素挂载到form对象上，所以form.secondLetter能直接访问到对应输入框的DOM元素；
2. 你是在submit事件触发时才去获取.value，这时候拿到的是用户提交瞬间输入框里的最新内容，自然就能得到正确的值。

给你两种更清晰的优化写法 #

写法一：提前保存DOM元素引用，提交时取最新值 #

这种方式更高效，不用每次提交都重新查询DOM：

const form = document.querySelector('#form');
// 只保存DOM元素的引用，不提前取value
const firstLetterInput = document.querySelector('#firstLetter');
const secondLetterInput = document.querySelector('#secondLetter');
const output = document.querySelector('#check');

form.addEventListener('submit', function(e){
  e.preventDefault();
  // 提交时才获取当前的输入值
  const firstLetter = firstLetterInput.value;
  const secondLetter = secondLetterInput.value;
  console.log(secondLetter);
})

写法二：提交时直接查询DOM并取值 #

如果输入框不多，这种写法也很直观：

const form = document.querySelector('#form');
const output = document.querySelector('#check');

form.addEventListener('submit', function(e){
  e.preventDefault();
  // 每次提交时才去获取最新的输入值
  const firstLetter = document.querySelector('#firstLetter').value;
  const secondLetter = document.querySelector('#secondLetter').value;
  console.log(secondLetter);
})

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