无法通过DOM获取input标签内容？点击确认首次无效刷新后生效

嘿，我来帮你搞定这个小问题！你遇到的「首次点击没效果，刷新后第二次点击才正常」的情况，核心原因很简单：你的personalInfo对象里的firsName和familyName是页面刚加载时就获取了输入框的值，那时候输入框是空的，所以第一次点击按钮时，你用的还是初始的空值，自然显示不出内容。而刷新页面后，如果浏览器自动填充了之前输入的内容，或者你重新输入后刷新，这时候页面加载时会获取到输入框的现有值，点击按钮就能显示出来了——但这只是巧合，不是正确的逻辑哦。

错误原因拆解 #

你现在的代码里，personalInfo的两个属性是在对象创建时就直接赋值：

var personalInfo = {
 firsName: document.getElementById("name").value, // 页面加载时输入框是空的，所以这里是空字符串
 familyName: document.getElementById("family").value, // 同理也是空
 confirm: function confirm() {
 document.getElementById("show-name").innerHTML = personalInfo.firsName;
 document.getElementById("show-family").innerHTML = personalInfo.familyName;
 }
}

这意味着不管用户之后在输入框里输入什么，personalInfo.firsName和familyName都不会更新，永远是页面加载时的空值。只有当页面刷新，输入框有预填充值时，这两个属性才会拿到新值。

修复后的代码 #

我们只需要把「获取输入框值」的操作移到confirm函数内部，这样每次点击按钮时，都会实时获取输入框的当前值：

JavaScript部分 #

var personalInfo = {
 confirm: function confirm() {
 // 每次点击按钮时，才去获取输入框的最新值
 const firstName = document.getElementById("name").value;
 const familyName = document.getElementById("family").value;
 document.getElementById("show-name").innerHTML = firstName;
 document.getElementById("show-family").innerHTML = familyName;
 }
}

或者如果你还是想保留对象里的属性，也可以在函数里更新属性值：

var personalInfo = {
 firstName: "",
 familyName: "",
 confirm: function confirm() {
 // 先更新属性为输入框的当前值
 this.firstName = document.getElementById("name").value;
 this.familyName = document.getElementById("family").value;
 // 再显示到结果区域
 document.getElementById("show-name").innerHTML = this.firstName;
 document.getElementById("show-family").innerHTML = this.familyName;
 }
}

HTML部分可保持不变 #

<div> Basic Information</div>
<table>
<tr>
<td>First Name</td>
<td><input type="text" id="name"></td>
<td>Family Name</td>
<td><input type="text" id="family"></td>
</tr>
</table>
<button type="button" onclick="personalInfo.confirm()">Confirm</button>
<br><br><br><br><br><br><br><br><br>
<hr>
<div> Result!</div>
<table>
<tr>
<td>Name & Family name:</td>
<td><span id="show-name"></span> <span id="show-family"></span></td>
</tr>
</table>

额外小提示 #

• 你代码里的firsName拼写错啦，应该是firstName（少了个t），虽然不影响功能，但规范拼写更好哦～
• 建议用const/let代替var，这是ES6之后更推荐的变量声明方式，作用域更清晰。

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