如何在容器中的同一页面上显示多个输入

Question

我正在尝试在同一页面的div中显示输入到表单中的详细信息，当单击提交按钮时，它不会显示。

  <script type="text/javascript">
function checkinput(){
    var a,b,c,d;
     a = document.getElementById("fname").value;
     b = document.getElementById("lname").value;
     c = document.getElementById("address").value;
     d = document.getElementById("email").value;
      document.getElementById('output').innerHTML = a + b + c + d ;
}

</script>

<form id = "myform" onsubmit ="return false" >
       <p>Firstname : <input type="text" name="Firstname" id="fname" value=""></p>
       <p>Last name  : <input type="text" name="lastname" id="lname" value=""></p>
       <p>Address    : <input type="text" name="Address" id = "address" value=""></p>
       <p>Email     :  <input type="email" name="Email" id = "email" value=""></p>
       <button onclick = "check()">submit</button>

</form>

<div id="output" style="width: 200px; height: 200px;border: 1px solid black">

</div>

我希望表单中输入的详细信息显示在下面的div元素中。

Answer 1

只需重命名单击按钮时尝试调用的方法。 <button onclick="checkinput()">submit</button>

要将每个部分放在自己的行上，添加“ “ 它们之间

document.getElementById('output').innerHTML = 
a + "<br/>" +  b + "<br/>" +  c + "<br/>" + d;

UPD

您可以将按钮的默认类型设置为上面推荐的“按钮”，在这种情况下，您不需要处理表单的“onsubmit”事件

<form id="myform">
    <p>Firstname : <input type="text" name="Firstname" id="fname" value=""></p>
    <p>Last name : <input type="text" name="lastname" id="lname" value=""></p>
    <p>Address : <input type="text" name="Address" id="address" value=""></p>
    <p>Email : <input type="email" name="Email" id="email" value=""></p>
    <button type="button" onclick="checkinput()">submit</button>
</form>

之后，您可以根据用途使用不同的js功能

// Strait forward - just get names from the array and use the values 
// in any way you like
    function checkinput1() {
        let html = "";
        for(let name of ["fname", "lname", "address", "email"]) {
            html += document.getElementById(name).value + "<br/>";
        }
        document.getElementById('output').innerHTML = html;
    }

// If you need just to concatenate values
    function checkinput2() {
        document.getElementById('output').innerHTML = `${document.getElementById('fname').value}
        <br/>${document.getElementById('lname').value}
        <br/>${document.getElementById('address').value}
        <br/>${document.getElementById('email').value}`;
    }

// When you want to get all values from the form inputs and don't 
// care about their real names. You can also skip the empty values, so
// no empty lines will be added to the result
    function checkinput3(){
        let values = [];
        for(let elem of document.querySelectorAll('#myform input')){
            if(elem.value) values.push(elem.value);
        }
        document.querySelector('#output').innerHTML = values.join('<br/>');
    }