Javascript: User input won't display in seperate lines-CodePudding

I'm trying to get the user input of a HTML form to display in separate lines. The javascript method generateInfo must generate HTML and display it as output.

Right now, all the outpu displays in the same line.

This is what I have so far:

The form accepts the user input and submits the information below the "Submit" button.

But I need each part of information for the output on its own newline.

Here's the code:

<script>
    function generateInfo(form) {
      document.getElementById("info").innerHTML = 
      form.elements["intro"].value   "   "  
      form.elements["first"].value   "   "  
      form.elements["last"].value   "   "  
      form.elements["phone"].value   "   "  
      form.elements["yearofbirth"].value   "   "  
      form.elements["email"].value   ".";

      form.reset();
      form.elements["intro"].value 
      form.elements["first"].focus() 
      form.elements["last"].disabled = true
      form.elements["phone"].value
      form.elements["yearofbirth"].value
      form.elements["email"].value;
       } // end generateInfo
      </script>
      <body>
      <form>
      Student Council Registration:
      <input type="text" id="intro" value="Spring 2022" readOnly>
    <br>
    First Name:
   <input type="text" id="first" size="15" autofocus
onchange="this.form.elements['last'].disabled=false">
  <br>
  Last Name:
  <input type="text" id="last" size="15" disabled>
  <br>
    Phone Number:
   <input type="number" id="phone" maxLength="10" placeholder="xxx-xxx-xxxx">
  <br>
  Year Of Birth:
  <input type="number" id="yearofbirth" size="4" placeholder="0000">
    <br>
    Email:
   <input type="text" id="email" size="30"  placeholder="[email protected]">
   <br><br>
   <input type="button" value="Submit"
onclick="generateInfo(this.form);">
 </form>
 <p id="info"></p>
</body>

CodePudding user response：

Add <br> tags in between all the values you want to print.

CodePudding user response：

You create a long list of text that displays in an HTML element:

document.getElementById("info").innerHTML = "....."

In case you need line breaks, you need to insert HTML linebreaks <br> elements.

So basically you need to change your HTML output from:

form.elements["intro"].value   "   "

form.elements["intro"].value   "  <br>"

CodePudding user response：

function generateInfo(form) {
      document.getElementById("info").innerHTML = 
      form.elements["intro"].value   "<br>"  
      form.elements["first"].value   " <br>  "  
      form.elements["last"].value   "<br>   "  
      form.elements["phone"].value   "<br>   "  
      form.elements["yearofbirth"].value   "<br>   "  
      form.elements["email"].value   ". <br>";

      form.reset();
      form.elements["intro"].value 
      form.elements["first"].focus() 
      form.elements["last"].disabled = true
      form.elements["phone"].value
      form.elements["yearofbirth"].value
      form.elements["email"].value;
       } // end generateInfo
      </script>

      <body>
      <form>
      Student Council Registration:
      <input type="text" id="intro" value="Spring 2022" readOnly>
    <br>
    First Name:
   <input type="text" id="first" size="15" autofocus
onchange="this.form.elements['last'].disabled=false">
  <br>
  Last Name:
  <input type="text" id="last" size="15" disabled>
  <br>
    Phone Number:
   <input type="number" id="phone" maxLength="10" placeholder="xxx-xxx-xxxx">
  <br>
  Year Of Birth:
  <input type="number" id="yearofbirth" size="4" placeholder="0000">
    <br>
    Email:
   <input type="text" id="email" size="30"  placeholder="[email protected]">
   <br><br>
   <input type="button" value="Submit"
onclick="generateInfo(this.form);">
 </form>
 <p id="info"></p>
</body>