Insert Username and Email ID into a list/array and display it using HTML and Javascriot-CodePudding

I'm trying to create a function such that, when the form is submitted the details filled by the user (ie his/her name and email id) is appended to a list/array. And then the list/array is displayed.

For example...
When I fill in the credentials for the first time:
Name - A
Email - [email protected]

The output on submitting the form should be:
[["A", "[email protected]"]]

When I fill in the credentials for the second time:
Name - B
Email - [email protected]

The output on submitting the form should be:
[["A", "[email protected]"], ["B", "[email protected]"]]

But when I tried this, I am not getting the output of the list/array. Here's what I tried...

const info = [];

function display(){
  var nm = document.getElementById("nm").value;
  var em = document.getElementById("em").value;
  var data = [nm, em];
  info.push(data);
  var text = document.createElement("h2");
  text.innerHTML = info;
}

<body>
  <script src="script.js"></script>
  <form onsubmit="return(display())">
    <input type="text" placeholder="Name" id="nm">
    <input type="email" placeholder="Email" id="em">
    <input type="submit" value="Submit">
  </form>

</body>

CodePudding user response：

The reason it's not displaying the data is for two reasons.

Everytime you submit the form, it refreshes the page. To prevent this you have to prevent the default action of the button submission. Which can be done using the function preventDefault() via an event. Better explained in the code.
You have not appended the created element to anything element, so it is not displaying anywhere on the webpage.

Both can be resolved by checking the code and it's explanation below!

const info = [];

function display(e){ // the `e` parameter is the event passed in.
    e.preventDefault(); // We run the function preventDefault to prevent the page from reloading.
    var nm = document.getElementById("nm").value;
    var em = document.getElementById("em").value;
    var data = [nm, em];
    info.push(data);
    var text = document.createElement("h2"); 
    text.innerHTML = info;
    document.body.appendChild(text); // You haven't appended the information to
    // anything, here I append the created Element to the Body so it displays, but do note, that this displays
    // the full list, you may want to change this to display only the newer data
    // or perhaps append to a element that prints out each time a new user is added.

    //console.log(info); You can see that the array now updateds in the console.
}

<script src="script.js"></script>
<!-- Pass the event of submitting a form as an argument -->
<form onsubmit="display(event)"> 
  <input type="text" placeholder="Name" id="nm">
  <input type="email" placeholder="Email" id="em">
  <input type="submit" value="Submit">
</form>