39,084
社区成员
发帖
与我相关
我的任务
分享为什么arr.push()在 info.addEventListener("submit",function(e)里面不好使，在外面就能用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
</style>
</head>
<body>
<form autocomplete="off" class="info">
<input type="text" placeholder="姓名" class="uname" name="uname">
<input type="text" placeholder="年龄" class="uage" name="uage">
<input type="text" placeholder="薪资" class="usalary" name="usalary">
<select name="" id="" class="usex" name="usex">
<option value="">男</option>
<option value="">女</option>
</select>
<select name="" id="" class="ucity" name="ucity">
<option value="">北京</option>
<option value="">上海</option>
</select>
<button class="add" type="submit" >aaa</button>
</form>
<table>
<thead>
<tr>
<td>id</td>
<td>姓名</td>
<td>年龄</td>
<td>性别</td>
<td>薪资</td>
<td>就业城市</td>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script>
let tbody=document.querySelector("tbody");
let arr=[{id:1,name:"汪洋",age:32,sex:"男",salary:2000,city:"北京"}];
arr.push({id:1,name:"汪洋",age:32,sex:"男",salary:20000,city:"北京"});
let info=document.querySelector(".info");
console.log(info);
let uname=document.querySelector(".uname");
let uage=document.querySelector(".uage");
let usalary=document.querySelector(".usalary");
let usex=document.querySelector(".usex");
let ucity=document.querySelector(".ucity");
info.addEventListener("submit",function(e){
e.preventDefault();
/* if(!uname.value || !uage.value || !usalary.value){
alert(`no!`);
}; */
console.log("aaa");
/* let ww= arr.push({id:arr.length+1,name:uname.value,age:uage.value,sex:usex.value,salary:usalary.value,city:ucity.value});
uname.value="unasssssme"; */
arr.push({id:1,name:"汪洋",age:32,sex:"男",salary:20000,city:"北京"});
arr.push({id:arr.length,name:uname.value,age:uage.value,sex:usex.value,salary:usalary.value,city:ucity.value});
})
let setlocalstorage=localStorage.setItem("arr",JSON.stringify(arr));
let getlocalstorage=JSON.parse(localStorage.getItem("arr"));
console.log(getlocalstorage);
console.log(arr);
console.log(typeof getlocalstorage);
console.log(typeof arr);
function render(){
let newArr=getlocalstorage.map(function(ele){
return`<tr>
<td>${ele.id}</td>
<td>${ele.name}</td>
<td>${ele.age}</td>
<td>${ele.sex}</td>
<td>${ele.salary}</td>
<td>${ele.city}</td>
</tr>`
})
tbody.innerHTML=newArr.join("");
}
render();
</script>
</body>
</html>
...全文
请发表友善的回复…
发表回复
维护员菜gou一枚 2023-10-07
- 打赏
- 举报
//以下是正确的代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
</style>
</head>
<body>
<form autocomplete="off" class="info">
<input type="text" placeholder="姓名" class="uname">
<input type="text" placeholder="年龄" class="uage">
<input type="text" placeholder="薪资" class="usalary">
<select name="usex" id="" class="usex">
<option value="男">男</option>
<option value="女">女</option>
</select>
<select name="ucity" id="" class="ucity">
<option value="北京">北京</option>
<option value="上海">上海</option>
</select>
<button class="add" type="submit">aaa</button>
</form>
<table>
<thead>
<tr>
<td>id</td>
<td>姓名</td>
<td>年龄</td>
<td>性别</td>
<td>薪资</td>
<td>就业城市</td>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script>
let tbody=document.querySelector("tbody");
let arr=[];
let info=document.querySelector(".info");
let uname=document.querySelector(".uname");
let uage=document.querySelector(".uage");
let usalary=document.querySelector(".usalary");
let usex=document.querySelector(".usex");
let ucity=document.querySelector(".ucity");
let setlocalstorage;
let getlocalstorage;
info.addEventListener("submit",function(e){
e.preventDefault();
/* if(!uname.value || !uage.value || !usalary.value){
alert(`no!`);
}; */
arr.push({id:arr.length+1,name:uname.value,age:uage.value,sex:usex.value,salary:usalary.value,city:ucity.value});
setlocalstorage=localStorage.setItem("arr",JSON.stringify(arr));
getlocalstorage=JSON.parse(localStorage.getItem("arr"));
function render(){
let newArr=getlocalstorage.map(function(ele){
return`<tr>
<td>${ele.id}</td>
<td>${ele.name}</td>
<td>${ele.age}</td>
<td>${ele.sex}</td>
<td>${ele.salary}</td>
<td>${ele.city}</td>
</tr>`
})
tbody.innerHTML=newArr.join("");
}
render();
})
</script>
</body>
</html>
维护员菜gou一枚 2023-10-07
- 打赏
- 举报
感谢大家我成功了，谢谢
mnxm 2023-10-07
- 打赏
- 举报
从你的代码中可以看出你想要实现什么，也知道为什么没有实现
这是对页面生命周期没有任何概念的新手写的代码
维护员菜gou一枚 2023-10-07
- 举报
是的 猜的非常准
xiaoxiaoguai_ba 2023-10-07
- 打赏
- 举报
getlocalstorage.map 换成arr.map就可以了，你没有发现你存储的一直都是原始的两个数据，没有变化吗
xiaoxiaoguai_ba 2023-10-07
- 举报
把你的render（）再写一个 写到info.addEventListener最后面，自调用一下
xiaoxiaoguai_ba 2023-10-07
- 举报
如果你不想把getlocalstorage.map 替换成arr.map你就把let setlocalstorage=localStorage.setItem("arr",JSON.stringify(arr))和let getlocalstorage=JSON.parse(localStorage.getItem("arr"));写到arr.push后面 千万记得不要忘记render的自调用
Samwey 2023-10-07
- 打赏
- 举报
你要实现什么样的效果，需求是什么？你想要达到什么样的效果
北辰星Charih 2023-10-06
- 打赏
- 举报
在你的代码中，arr.push() 不管是在 info.addEventListener("submit",function(e) 的内部还是外部，都应该是有效的。但是在你的代码中，问题可能出现在事件监听器外部的 arr 定义上。
你在事件监听器外部定义了一个初始的 arr 数组：
let arr = [{id:1, name:"汪洋", age:32, sex:"男", salary:2000, city:"北京"}];
然后在事件监听器内部使用 arr.push() 添加新的元素。问题可能出现在你的表单提交后，刷新页面或重新加载页面后，这个初始的 arr 数组被重新定义为空数组，因为你没有将本地存储的数据赋值给它。
你可以尝试在事件监听器外部初始化 arr 时，从本地存储中获取数据：
let arr = JSON.parse(localStorage.getItem("arr")) || [];
这将确保在页面加载时，arr 会从本地存储中获取已保存的数据，而不是重新定义为空数组。这样，在 info.addEventListener("submit",function(e) 内部使用 arr.push() 就应该正常工作了。
