javascript - 无法通过 DOM 从输入标签获取文本

标签 javascript html dom

我是 JavaScript 新手,我想从两个字段中获取一些文本。 用户点击确认后。文本打印在结果部分。 它没有按我的预期工作。确认后刷新一次页面,第二次就可以了!

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;
  }
}
<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>

最佳答案

在您当前的代码中,personalInfo.firstNamepersonalInfo.familyName 被设置为 声明时 DOM 元素的值personalInfo 变量。您应该将它们替换为按下按钮时(当 personalInfo.confirm() 运行时)获取 DOM 元素值的函数:

var personalInfo = {
  firstName: function () {return document.getElementById("name").value},
  familyName: function () {return document.getElementById("family").value},
  confirm: function() {
    document.getElementById("show-name").innerHTML = personalInfo.firstName();
    document.getElementById("show-family").innerHTML = personalInfo.familyName();
  }
}
<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>
<hr>
<h3> Result:</h3>
<div>Name: <span id="show-name"></span></div>
<div>Family name: <span id="show-family"></span></div>

关于javascript - 无法通过 DOM 从输入标签获取文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50308727/

相关文章:

jQuery:将 TextArea 内容转换为 html 字符串,反之亦然

javascript - jQuery Div滚动功能: Issue in IE

javascript - 从窗口中选择的文本为空

将 html 移动到父站点后,Javascript 停止工作

javascript - 为什么我会收到 ParseError?

javascript - 在同一页面中嵌入两个 Ember Cli 应用程序实例

javascript - 当 web 端口 80 已被使用时,如何监听 heroku 上的任何端口?

php - 在一对多关系中获取字符串值而不是外部 id

javascript - 您可以将 HTML5 <canvas> 元素用于 Video.js 视频吗?

javascript - appendChild 可能删除元素?