如何在一个div中的文本框中显示输入，在另一个div中

Question

我创建了三个 div，第一个是父 div，里面有两个 div。我并排编写了两个子 div，并提供了一些输入文本框，以使用第二个 div floatchild1 内的按钮获取值，我想显示这些输入值在第三个 div floatchild2 内。我尝试使用 document.getElementById 获取值，但它似乎不起作用，我如何获取值并显示它们。

function onTransfer() {
  var divs = document.getElementById('float-child').innerHTML;
  document.getElementById('floatchild2').innerHTML = divs;
  console.log('float-child2');
}

.float-container {
  border: 3px solid #fff;
  padding: 20px;
  width: 100%;
  height: 100%;
}

.float-child {
  width: 48%;
  height: 50%;
  float: left;
  padding: 20px;
  border: 2px solid red;
}

.float-child2 {
  width: 46%;
  height: 50%;
  float: right;
  padding: 20px;
  border: 2px solid red;
}

<div class="float-container">

  <div class="float-child">
    <label> First Name:</label><input title="FirstName" id="txtFname" /><br>
    <label> Last Name:</label><input title="lastName" id="txtLname" /><br>
    <label> Age:</label><input title="age" id="txtage"><br>
    <label> Email Address:</label><input title="Email" id="txtemail" /><br>
    <button id="btnTransfer" onclick="onTransfer()">Transfer</button>
  </div>

  <div class="float-child2">

  </div>

</div>

我哪里出错了？有什么方法可以只使用 JavaScript 和 HTML 来实现此目的吗？

Answer 1

有两个问题：第一是你拼错了

float-child2

，第二个问题是在你的 html 中你使用了类，但在 Javascript 代码中它是

getElementById()

而不是类。我将 css 和 html 中的所有内容都更改为 ids。

function onTransfer() {
  var divs = document.getElementById('float-child').innerHTML;
  document.getElementById('float-child2').innerHTML = divs;
  console.log('float-child2');
}

.float-container {
  border: 3px solid #fff;
  padding: 20px;
  width: 100%;
  height: 100%;
}


#float-child {
  width: 48%;
  height: 50%;
  float: left;
  padding: 20px;
  border: 2px solid red;
}

#float-child2 {
  width: 46%;
  height: 50%;
  float: right;
  padding: 20px;
  border: 2px solid red;
}

<div class="float-container">

  <div id="float-child">
    <label> First Name:</label><input title="FirstName" id="txtFname" /><br>
    <label> Last Name:</label><input title="lastName" id="txtLname" /><br>
    <label> Age:</label><input title="age" id="txtage"><br>
    <label> Email Address:</label><input title="Email" id="txtemail" /><br>
    <button class="btnTransfer" onclick="onTransfer()">Transfer</button>
  </div>

  <div id="float-child2">

  </div>

</div>