Unable to copy 3 input fields in JS-CodePudding

Wants to merge 3 input field's value in 1 input

Wants to print 'fname mnane lname in' fullname input field.

after than copy fullname value into fullname2.

My code is below.

HTML

<div >
  <label>Last Name</label>
  <input  id="lname" type="text" onchange="setaddress()" onkeyup="this.value = this.value.toUpperCase();">
</div>
<div >
  <label>Middle Name</label>
  <input  id="mname" type="text" onchange="setaddress()" onkeyup="this.value = this.value.toUpperCase();">
</div>
<div >
  <label>First Name</label>
  <input  id="fname" type="text" onchange="setaddress()" onkeyup="this.value = this.value.toUpperCase();">
</div>
<div >
<label>Complete Name</label>
<input  id="fullname" type="text" readonly>
</div>
<div >
<label>Complete Name Again</label>
<input  id="fullname2" type="text" readonly>
</div>

function setaddress() {
  var fname = document.getElementById('fname').value;
  var mname = document.getElementById('mname').value;
  var lname = document.getElementById('lname').value;

  document.getElementById('fullname').value =  fname  " "   mname  " "    lname;
}

    //using JS 2 to copy input field

        window.onload = function() {
    var src = document.getElementById("fullname"),
        dst = document.getElementById("fullname2");
    src.addEventListener('input', function() {
        dst.value = src.value;
    });
};

CodePudding user response：

innerHTML is for normal tags if you want to change value of input field you should use

document.getElementById('fullname').value =  fname  " "   mname  " "    lname;
document.getElementById('fullname2').value =  fname  " "   mname  " "    lname;