学生编号作为key 学生的信息(姓名,年龄,住址)作为value 添加到Map中
,当用户输入相同学生信息的时候需要提醒,用户该信息已经存在。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<label>学生编号:
<input type="text" value="请输入学生编号" >
</label>
<label>学生姓名:
<input type="text" value="请输入学生姓名" >
</label>
<label>学生年龄:
<input type="text" value="请输入学生年龄" >
</label>
<label>学生住址:
<input type="text" value="请输入学生住址" >
</label>
<br/>
<button>确认</button>
<script>
// 创建Map实例
var myMap = new Map()
var inputArr=document.getElementsByTagName('input')
var btn=document.getElementsByTagName('button')[0]
var props=['name','age','addr']
var title=['编号','姓名','年龄','住址']
btn.onclick=function(){
if(myMap.has(inputArr[0].value)){
alert('该用户信息已经存在!')
}else {
// 定义一个对象来存储信息
let obj={}
// 学生信息处理
for(let i=0;i<inputArr.length;i++){
if(!inputArr[i].value.trim()){
alert(`${title[i]}不能为空`)
return false
}
}
for(let i=0;i<props.length;i++){
obj[props[i]]=inputArr[i+1].value
}
// 存入Map
myMap.set(inputArr[0].value,obj)
console.log(myMap)
// 遍历查看存入信息
myMap.forEach((value,key)=>{
console.log(key)
console.log(value)
})
}
}
</script>
</body>
</html>