I'm currently facing a problem with my JavaScript code. I have constructed a login form and am attempting to transfer the data from the form to another page where it will be showcased in a table. Regrettably, the details are failing to appear on the subsequent page.
let tbody = document.querySelector("tbody");
const btnSend = document.getElementById("btnSend");
const nom = document.getElementById("nom");
const prenom = document.getElementById("prenom");
const age = document.getElementById("age");
function addData(nom, prenom, age) {
let tr = document.createElement("tr");
let tdNom = document.createElement("td");
tdNom.textContent = nom;
let tdPrenom = document.createElement("td");
tdPrenom.textContent = prenom;
let tdAge = document.createElement("td");
tdAge.textContent = age;
let btn = document.createElement("td");
let suppBtn = document.createElement("button");
suppBtn.classList.add("supp");
suppBtn.textContent = "Supp";
btn.appendChild(suppBtn);
let modifBtn = document.createElement("button");
modifBtn.classList.add("modif");
modifBtn.textContent = "Modifier";
btn.appendChild(modifBtn);
tr.appendChild(tdNom);
tr.appendChild(tdPrenom);
tr.appendChild(tdAge);
tr.appendChild(btn);
tbody.appendChild(tr);
}
btnSend.addEventListener("click", ()=>{
addData(nom.value,prenom.value,age.value);
window.location.assign('index.html');
});label {
display: block;
font-weight: bold;
margin-bottom: 5px;
}
input[type="text"], input[type="number"] {
display: block;
width: 100%;
padding: 8px;
border-radius: 4px;
border: 1px solid #ccc;
margin-bottom: 20px;
font-size: 16px;
}
button {
background-color: #007bff;
color: white;
border: none;
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
border-radius: 4px;
}
button:hover {
background-color: #0069d9;
}<body>
<h1>My Main Page</h1>
<iframe src="index.html" width="100%" height="500px"></iframe>
<label>Name:</label>
<input type="text" id="nom" placeholder="Your name here...">
<label>Surname:</label>
<input type="text" id="prenom" placeholder="Your surname here...">
<label>Age:</label>
<input type="number" id="age" placeholder="Your age here...">
<button id="btnSend">Send</button>
<script src="sc.js"></script>
</body> <table>
<thead>
<th>Name</th>
<th>Surname</th>
<th>Age</th>
<th>Actions</th>
</thead>
<tbody>
</tbody>
</table>
What might be causing the absence of data on the second page (index.html)? How can this issue be resolved?