JavaScript获取input输入框value值为空的原因解析

这个现象和querySelector的返回值特性无关，核心是读取value的时机错误，外加JavaScript的原始值赋值逻辑导致的：

• 第一版代码的执行逻辑：
  页面加载、脚本初始化运行时，就立刻执行document.querySelector('#artist').value读取输入框值。这时候用户还没来得及输入任何内容，输入框的初始value就是空字符串，你把这两个空字符串直接赋值给了artistName、songName两个变量。
  字符串是JavaScript的原始类型，赋值是直接做值拷贝，后续输入框的value怎么变，都和这两个已经存了空字符串的变量没有任何关系。点击按钮触发回调时，你打印的是初始化阶段就存好的两个固定空字符串，自然拿不到用户后续输入的内容。
• 第二版代码能正常运行的逻辑：
  脚本初始化阶段，你只是把选中的两个input DOM节点存到了变量里。DOM节点是对象类型，变量存的是指向这个节点的引用地址，不是某个时刻的快照值。点击按钮触发回调时，你才通过这个引用地址去实时读取节点当前的value属性，这时候用户已经完成输入，所以能拿到最新的正确值。

可以用一个生活化的例子理解：第一版写法相当于你在冰箱空着的时候拍了张冰箱内部的照片存着，等别人把饮料放进去之后，你翻之前的照片，永远只能看到空冰箱；第二版写法相当于你记住了冰箱的位置，要拿东西的时候亲自走到冰箱跟前去看，自然能看到现在冰箱里实际放的东西。

所有表单元素的实时值，都要在你需要用到的那个时刻去读取（比如点击提交按钮、输入触发事件的瞬间），不要在页面初始化阶段就提前把value存到普通变量里，那样拿到的永远是初始值。

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