无法从 javascript 中的对象数组获取值
[英]Having trouble getting values from an array of objects in javascript
问题描述
I am making a program to get user input from HTML forms and compile them into an object for each user.
我正在制作一个程序来从 HTML forms 获取用户输入，并将它们编译成每个用户的 object。 So, I have an HTML form, I make a constructor, then I set up a click event to make the object, then I put it in the variable, and then I am trying to put that variable in an array of objects, before finally using a for loop to get all of the information from each object in this array.所以，我有一个 HTML 表单，我制作了一个构造函数，然后我设置了一个点击事件来制作 object，然后我将它放入变量中，然后我尝试将该变量放入一个对象数组中，最后使用 for 循环从该数组中的每个 object 获取所有信息。 However, I am having trouble with that last part (or at least I think).但是，我在最后一部分遇到了麻烦（或者至少我认为）。 Every time I run the code, the console log does display the message, but it is coming up with undefined rather than the user input.每次我运行代码时，控制台日志都会显示消息，但它是未定义的而不是用户输入。 Can someone help please?有人可以帮忙吗？
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>
2 个解决方案
解决方案1
1 2022-03-01 02:05:36
By assigning to user , you're assigning to a property of the constructor, not a property of the instance.通过分配给user ，您分配给构造函数的属性，而不是实例的属性。 new User will mutate the constructor and return an empty object whose internal prototype is user.prototype . new User将改变构造函数并返回一个空的 object ，其内部原型是user.prototype 。
Assign to this instead inside the constructor, to change the instance that gets returned.在构造函数内部分配给this ，以更改返回的实例。
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>
Or use a plain object instead of a constructor.或者使用普通的 object 而不是构造函数。
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>
解决方案2
0 2022-03-01 02:28:43
make your life easier, use names in your forms!让您的生活更轻松，在表单中使用名称！
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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.