Estoy creando un programa para obtener información del usuario de formularios HTML y compilarlos en un objeto para cada usuario. Entonces, tengo un formulario HTML, hago un constructor, luego configuro un evento de clic para hacer el objeto, luego lo coloco en la variable, y luego intento colocar esa variable en una matriz de objetos, antes de finalmente usando un bucle for para obtener toda la información de cada objeto en esta matriz. Sin embargo, tengo problemas con la última parte (o al menos eso creo). Cada vez que ejecuto el código, el registro de la consola muestra el mensaje, pero aparece sin definir en lugar de la entrada del usuario. ¿Puede alguien ayudar, por favor?
function user(firstName, lastName, address) { user.firstName = firstName; user.lastName = lastName; user.address = address; } var users = []; document.addEventListener("submit", function(addUser) { event.preventDefault(); var newUser = new user( document.getElementById("userFName").value, document.getElementById("userLName").value, document.getElementById("userAdd").value ); users.push(newUser); for (let i = 0; i < users.length; i++) { console.log("User" + (i + 1) + "'s first name is " + users[i].firstName + ", their last name is " + users[i].lastName + ", and their address is " + users[i].address); } }); <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>WWW</title> <style> </style> </head> <body> <form> <input id="userFName" placeholder="First Name"> <input id="userLName" placeholder="Last Name"> <input id="userAdd" placeholder="Address"> <button type="submit">Submit</button> </form> </body> </html>Al asignar a user , está asignando a una propiedad del constructor, no a una propiedad de la instancia. new User mutará el constructor y devolverá un objeto vacío cuyo prototipo interno es user.prototype .
Asigne a this dentro del constructor, para cambiar la instancia que se devuelve.
function user(firstName, lastName, address) { this.firstName = firstName; this.lastName = lastName; this.address = address; } var users = []; document.addEventListener("submit", function(addUser) { event.preventDefault(); var newUser = new user( document.getElementById("userFName").value, document.getElementById("userLName").value, document.getElementById("userAdd").value ); users.push(newUser); for (let i = 0; i < users.length; i++) { console.log("User" + (i + 1) + "'s first name is " + users[i].firstName + ", their last name is " + users[i].lastName + ", and their address is " + users[i].address); } }); <form> <input id="userFName" placeholder="First Name"> <input id="userLName" placeholder="Last Name"> <input id="userAdd" placeholder="Address"> <button type="submit">Submit</button> </form>O use un objeto simple en lugar de un constructor.
const user = (firstName, lastName, address) => ({ firstName, lastName, address }); const users = []; document.addEventListener("submit", function(addUser) { event.preventDefault(); var newUser = user( document.getElementById("userFName").value, document.getElementById("userLName").value, document.getElementById("userAdd").value ); users.push(newUser); for (let i = 0; i < users.length; i++) { console.log("User" + (i + 1) + "'s first name is " + users[i].firstName + ", their last name is " + users[i].lastName + ", and their address is " + users[i].address); } }); <form> <input id="userFName" placeholder="First Name"> <input id="userLName" placeholder="Last Name"> <input id="userAdd" placeholder="Address"> <button type="submit">Submit</button> </form>Haz tu vida más fácil, ¡usa nombres en tus formularios!
const myForm = document.querySelector('#my-form') , users = [] ; myForm.onsubmit = e => { e.preventDefault() users.push({ firstName: myForm.userFName.value , lastName : myForm.userLName.value , address : myForm.userAdd.value }) console.clear() users.forEach( (user,i) => console.log(i,JSON.stringify(user)) ) myForm.reset() // clear inputs myForm.userFName.focus() } <form id="my-form"> <input name="userFName" placeholder="First Name" required > <input name="userLName" placeholder="Last Name" required > <input name="userAdd" placeholder="Address" required > <button type="submit">Submit</button> </form>