JavaScript 点击按钮保存用户到数组中
时间: 2023-07-16 10:16:44 浏览: 63
可以使用以下代码实现:
1. 首先定义一个空数组来存储用户:
```
var users = [];
```
2. 接下来,为保存按钮添加一个点击事件监听器:
```
var saveButton = document.getElementById("saveButton");
saveButton.addEventListener("click", function() {
// 获取用户输入的信息
var name = document.getElementById("nameInput").value;
var age = document.getElementById("ageInput").value;
// 将用户添加到数组中
users.push({ name: name, age: age });
// 清空表单
document.getElementById("nameInput").value = "";
document.getElementById("ageInput").value = "";
});
```
此时,每次用户点击保存按钮时,都会将用户信息添加到数组中,并清空表单。
相关问题
JavaScript 点击按钮,如果用户不存在,保存用户到数组中
可以使用以下代码来实现:
```javascript
// 假设已经有一个空的数组 users
let username = prompt("请输入用户名:");
if (users.indexOf(username) === -1) {
users.push(username);
console.log(`用户 ${username} 已添加到数组中。`);
} else {
console.log(`用户 ${username} 已存在。`);
}
```
这段代码会弹出一个提示框,让用户输入用户名。如果输入的用户名不存在于数组中,则将其添加到数组中并输出一条成功的提示信息;如果用户名已存在,则输出一条失败的提示信息。
html实现录入信息在数组中、保存本地功能
要实现录入信息在数组中、保存本地功能,可以使用HTML5中的localStorage来实现。
首先,在HTML页面中创建一个表单,让用户输入需要保存的信息:
```
<form>
<label for="name">姓名:</label>
<input type="text" id="name" name="name"><br><br>
<label for="age">年龄:</label>
<input type="number" id="age" name="age"><br><br>
<label for="email">邮箱:</label>
<input type="email" id="email" name="email"><br><br>
<input type="button" value="保存" onclick="saveData()">
</form>
```
在表单中,我们定义了三个输入框:姓名、年龄和邮箱。同时,我们也添加了一个保存按钮,当用户填写完信息后,可以点击保存按钮将信息保存到localStorage中。
接下来,在JavaScript中定义一个名为saveData的函数,用于将用户输入的信息保存到localStorage中:
```
function saveData() {
// 获取用户输入的信息
var name = document.getElementById("name").value;
var age = document.getElementById("age").value;
var email = document.getElementById("email").value;
// 将信息保存到localStorage中
var data = {
name: name,
age: age,
email: email
};
if (localStorage.getItem("userData") === null) {
var userData = [];
userData.push(data);
localStorage.setItem("userData", JSON.stringify(userData));
} else {
var userData = JSON.parse(localStorage.getItem("userData"));
userData.push(data);
localStorage.setItem("userData", JSON.stringify(userData));
}
}
```
在saveData函数中,我们首先获取用户输入的姓名、年龄和邮箱,然后将这些信息保存到一个对象中。接下来,我们判断localStorage中是否已经有保存用户信息的数组,如果没有,则创建一个新的数组,并将当前用户的信息加入其中;如果已经存在,则将当前用户的信息加入数组中并更新localStorage中保存的数据。
最后,我们使用JSON.stringify将保存用户信息的数组转换为字符串,然后使用localStorage.setItem将其保存到本地。
这样,当用户点击保存按钮时,就会将其输入的信息保存到localStorage中。
如果需要在页面中展示保存的信息,可以通过以下代码获取localStorage中保存的数据,并将其展示在页面中:
```
var userData = JSON.parse(localStorage.getItem("userData"));
for (var i = 0; i < userData.length; i++) {
document.write("姓名:" + userData[i].name + "<br>");
document.write("年龄:" + userData[i].age + "<br>");
document.write("邮箱:" + userData[i].email + "<br><br>");
}
```
在上述代码中,我们首先使用JSON.parse将保存用户信息的数组转换为JavaScript对象,然后遍历这个对象,将每个用户的信息展示在页面上。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)