为什么arr.push()在  info.addEventListener("submit",function(e)里面不好使,在外面就能用。

维护员菜gou一枚 2023-10-06 21:09:27
<!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>

 

...全文
5642 11 打赏 收藏 转发到动态 举报
写回复
用AI写文章
11 条回复
切换为时间正序
请发表友善的回复…
发表回复
  • 打赏
  • 举报
回复
//以下是正确的代码
<!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>
  • 打赏
  • 举报
回复

感谢大家我成功了,谢谢

mnxm 2023-10-07
  • 打赏
  • 举报
回复

从你的代码中可以看出你想要实现什么,也知道为什么没有实现
这是对页面生命周期没有任何概念的新手写的代码

  • 举报
回复
@mnxm 是的 猜的非常准
xiaoxiaoguai_ba 2023-10-07
  • 打赏
  • 举报
回复

getlocalstorage.map 换成arr.map就可以了,你没有发现你存储的一直都是原始的两个数据,没有变化吗

xiaoxiaoguai_ba 2023-10-07
  • 举报
回复
@xiaoxiaoguai_ba 把你的render()再写一个 写到info.addEventListener最后面,自调用一下
xiaoxiaoguai_ba 2023-10-07
  • 举报
回复
@xiaoxiaoguai_ba 如果你不想把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
  • 打赏
  • 举报
回复

你要实现什么样的效果,需求是什么?你想要达到什么样的效果

  • 举报
回复
@Samwey 效果就是让info.addEventListener("submit",function(e)里面的arr.push()好使 ,现在这个代码里不好使
  • 举报
回复
@维护员菜gou一枚 而且我发现别的代码都好使,就这个不行。就是在那个表格里往下面加行。arr.push({id:1,name:"汪洋",age:32,sex:"男",salary:20000,city:"北京"});
北辰星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() 就应该正常工作了。

39,093

社区成员

发帖
与我相关
我的任务
社区描述
HTML5是构建Web内容的一种语言描述方式。HTML5是互联网的下一代标准,是构建以及呈现互联网内容的一种语言方式.被认为是互联网的核心技术之一。
社区管理员
  • HTML5社区
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧