How can i get user data and put the output in the form

I want to do as shown in this picture:

I want to get the user data from FORM and show that on my page using JavaScript.Below is the code that I have tried till now.

Code:

function show(){            
  var fName = document.data.fName.value;
  var lName = document.data.lName.value;
  var address = document.data.address.value;
  document.write(FName);
}

<div >
<span >
  <h2><span>User Info</span></h2>
</span>
<form name="data">
  <table>
    <tr>
      <td>First Name</td>
      <td><input type="text" name="fName"> </td>
    </tr>
    <tr>
      <td>Last Name</td>
      <td><input type="text" name="lName"> </td>
    </tr>
    <tr>
      <td>Address</td>
      <td><input type="text" name="address">
      </td>
    </tr>
    <tr>
      <td></td>
      <td><button type="button" 
 onclick="show()">Show</button> 
function
      </td>
    </tr>
  </table>
</form>
</div>
  <h1 align="center">Your Output Is Here</h1>
<div >
<span >
  <h2><span>User Info</span></h2>
</span>
<form name="data">
  <table >
    <tr>
      <td>Your First Name:<span name="FName"></span></td>
      <td></td>
    </tr>
    <tr>
      <td>Your Last Name:<span name="LName"></span></td>
      <td></td>
    </tr>
    <tr>
      <td>Your Address:<span name="Address"></span></td>
      <td></td>
    </tr>
  </table>

CodePudding user response：

Please check working code below

 function show(){
 
 var fName = document.getElementById("fname").value;
 var lName = document.getElementById("lname").value;
 var address = document.getElementById("address").value;
 
 document.getElementById("showFname").innerHTML = fName;
 document.getElementById("showLname").innerHTML = lName;
 document.getElementById("showAddress").innerHTML = address;
 }

* {
 margin: 0;
 padding: 0;
 }
 .user-info{
 margin: 50px auto;
 width: 400px;
 height: 200px;
 border: 1px solid black;
 text-align:center;
 }
 h2 {
 text-align:center;
 }
 /*---setting background color as white and pushing the heading to up using bottom tag---*/
 .line h2 span{
 background-color:white;
 position: relative;
 bottom: 15px;
 }
 /*===========Second Table==============*/

<form name="data">
 <table>
 <tr>
 <td>First Name</td>
 <td><input type="text" name="fName" id="fname"> </td>
 </tr>
 <tr>
 <td>Last Name</td>
 <td><input type="text" name="lName" id="lname"> </td>
 </tr>
 <tr>
 <td>Address</td>
 <td><input type="text" name="address" id="address">
 </td>
 </tr>
 <tr>
 <td></td>
 <td><button type="button" onclick="show()">Show</button>
 </td>
 </tr>
 </table>
 </form>
 </div>
 <h1 align="center">Your Output Is Here</h1>
 <div >
 <span >
 <h2><span>User Info</span></h2>
 </span>
 <form name="data">
 <table >
 <tr>
 <td>Your First Name:</td>
 <td><span name="FName" id="showFname"></span></td>
 </tr>
 <tr>
 <td>Your Last Name:</td>
 <td><span name="LName" id="showLname"></span></td>
 </tr>
 <tr>
 <td>Your Address:</td>
 <td><span name="Address" id="showAddress"></span></td>
 </tr>
 </table>
 </form>

Here, I have added id to the span and input field to fetch the value. Please avoid CSS view, here I have focused on functionality.

Please check and let me know if you find any issue with the code.

Thanks.