javascript - 如何使用纯 JavaScript 将输入值保存在 JSON 对象中,然后将其保存在数组中?
问题描述
我认为标题说明了一切。我需要将输入值保存在一个对象中,然后将该对象保存在一个数组中。
<html>
<head>
<title>Teste</title>
</head>
<script>
function vai(){
var pessoa = {
nome = document.getElementById('nome').value,
idade = document.getElementById('idade').value
};
var i = 0;
var pessoas = [];
pessoas[i] = pessoa{};
i++;
}
</script>
<body>
<label>Digite seu nome aqui</label>
<input type='text' id='nome' placeholder='aquii'>
<label>Digite sua idade aqui</label>
<input type='text' id='idade' placeholder='aquii'>
<button onclick='vai()'>
Teste aqui
</button>
</body>
</html>
解决方案
您应该在全局环境(函数外部)中声明数组。您在对象内部也有一些语法问题(应该:
代替=
)。然后你可以简单地push()
在每个按钮单击时将对象放入数组中。
试试下面的方法:
var pessoas = [];
function vai(){
var pessoa = {
nome: document.getElementById('nome').value,
idade: document.getElementById('idade').value
};
pessoas.push(pessoa);
console.log(pessoas);
}
<label>Digite seu nome aqui</label>
<input type='text' id='nome' placeholder='aquii'>
<label>Digite sua idade aqui</label>
<input type='text' id='idade' placeholder='aquii'>
<button onclick='vai()'>
Teste aqui
</button>
除了变量声明范围外,您不使用push()
通过维护变量的方法几乎是正确的。您必须将其声明为全局变量。您可以将对象分配到当前位置并在每个函数调用中递增:
var pessoas = [];
var i = 0;
function vai(){
var pessoa = {
nome: document.getElementById('nome').value,
idade: document.getElementById('idade').value
};
pessoas[i] = pessoa;
i++;
console.log(pessoas);
}
<label>Digite seu nome aqui</label>
<input type='text' id='nome' placeholder='aquii'>
<label>Digite sua idade aqui</label>
<input type='text' id='idade' placeholder='aquii'>
<button onclick='vai()'>
Teste aqui
</button>
请注意:您也可以简单地使用数组的属性作为当前索引,在这种情况下您确实需要维护变量:length
var pessoas = [];
function vai(){
var pessoa = {
nome: document.getElementById('nome').value,
idade: document.getElementById('idade').value
};
pessoas[pessoas.length] = pessoa;
console.log(pessoas);
}
<label>Digite seu nome aqui</label>
<input type='text' id='nome' placeholder='aquii'>
<label>Digite sua idade aqui</label>
<input type='text' id='idade' placeholder='aquii'>
<button onclick='vai()'>
Teste aqui
</button>
推荐阅读
- asp.net-mvc - ASP.NET Core 中每个用户的控制器
- python - 遍历 df 行并附加到没有名称和 dtype 的列表
- grafana - 仅使用堆叠图的总和创建 Grafana 统计量
- android - 在相机/预览运行时显式更改 CameraX 焦点?(不仅仅是在构建相机时。)
- c# - 在 ASP.NET MVC 中使用 Ajax 发布多个模型对象
- git - 如何从 git 仅获取真实的分支名称以使用它们进行批量更改
- arrays - Powershell 脚本检查然后添加多个驱动程序
- libreoffice-calc - 如何在 libreoffice calc 中实现多个或条件
- angular - 在更新选定列表时获取输出列表(checkedCitiesList)中的重复列表(选择或取消选择列表或个人)
- reactjs - 如何以编程方式从 Firebase 下载/保存图像?