I want to fill the form and display the form data using table format but I am getting the error "Cannot read property 'name' of undefined".
I have added all my HTML, CSS, and js code below. When I see the console I see error code executes correctly.
I found the error is because I have <= used in the for loop. when I use just < error goes away. What is the theory behind this?
Please help me
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div#result {
width: 100%;
clear: both;
text-align: center;
}
#result div {
width: 25%;
float: left;
}
</style>
<title>Contact form</title>
<script type="text/javascript">
window.onload = function(){
var users = [];
var btn = document.querySelector('#btn');
var form = document.querySelector("#form");
btn.addEventListener('click', function(){
var obj ={
name: document.querySelector('#name').value,
email: document.querySelector('#email').value,
phone: document.querySelector('#phone').value,
website: document.querySelector('#website').value,
//console.log(obj);
}
users.push(obj);
console.log(users);
var output = document.querySelector('#output'); //getElementById was giving error
output.innerHTML = "<h1> Result </h1>";
var div = document.createElement('div');
div.setAttribute('id', 'result');
output.appendChild(div);
for(var i =0; i<= users.length; i++){
//div.innerHTML = "";
div.innerHTML += "<div>" + users[i].name + "</div>" +
"<div>" + users[i].email + "</div>" +
"<div>" + users[i].phone + "</div>" +
"<div>" + users[i].website + "</div>" ;
form.reset();
}
})
}
</script>
</head>
<body>
<div class="input">
<h1> Form </h1>
<form id="form">
<p><input type="text" name="name" id="name" placeholder="Your name" required></p>
<p><input type="email" name="email" id="email" placeholder="Your Email Address" required></p>
<p><input type="number" name="phone" id="phone" placeholder="Your Phone Number" required></p>
<p><input type="website" name="website" id="website" placeholder="www.example.com" required></p>
<p><input type="button" id="btn" value="Submit"></p>
</form>
</div>
<br>
<div id="output">
</div>
</body>
</html>
