Как отобразить несколько входов на одной странице в контейнере

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/>');
    }