Currently, I am working on a basic JavaScript program that requires me to collect five personal details from the user: their name, address, city, gender, and age. The goal is to display these details in a table format, but unfortunately, the program is not functioning correctly.
var btn1 = document.getElementById("btn");
btn1.addEventListener("click", details);
var row = 1;
function details() {
var name = document.getElementById("name").value;
var address = document.getElementById("address").value;
var city = document.getElementById("city").value;
var age = document.getElementById("age").value;
var gender = document.getElementById("gender").value;
var table = document.getElementById("display");
var newrow = table.insertRow(row);
var cell1 = newrow.insertCell(0);
var cell2 = newrow.insertCell(1);
var cell3 = newrow.insertCell(2);
var cell4 = newrow.insertCell(3);
var cell5 = newrow.insertCell(4);
cell1.innerHTML = name;
cell2.innerHTML = address;
cell3.innerHTML = city;
cell4.innerHTML = age;
cell5.innerHTML = gender;
row++;
}<div>
Name: <input type="text" name="n1" id="name"><br><br> Address: <input type="text" name="a" id="address"><br><br> City: <input type="text" name="c1" id="city"><br><br> Age: <input type="text" name="a1" id="age"><br><br> Gender: <input type="text" name="g1"
id="gender"><br><br>
<button id="btn">Submit</button><br><br>
</div>
<table id="display" border="1" cellspacing="0">
<tr>
<th>Name</th>
<th>Address</th>
<th>City</th>
<th>Age</th>
<th>Gender</th>
</tr>
</table>