Strengthen the case ：

Save a group of students with an array , The attributes of each student include , full name , fraction , Names and scores from the page input Box acquisition , Click query button , Brush selection score is greater than 60 All the students in the class save a group of students in an array ,

css The content part ：

li{
                list-style:none;
            }
            *{
                margin:0px;
                padding:0px;
            }
            #names{
                width:600px;
                height:100%;
                margin:100px auto;
                border:2px solid #FF0000;
                padding:10px 10px;
                font-size:20px;
                background-color:green;
            }
            #add{
                margin-right:50px;
            }
            input{
                width:200px;
                font-size: 20px;
            }

HTML The content part ：

 <div id="names">
             full name :<input type="text" id="add">
             fraction :<input type="text" id="taby">
            <button id="btn"> add to </button>
        <p> Student information :</p>
        <ul id="student">
            
        </ul>
        
        <button id="btn1"> Find qualified students </button>
        <p> The passing students are as follows :</p>
        <ul id="td">
            
        </ul>
        
        </div>

js The content part ：

    // Get all the tags
            let names = document.querySelector('#add');
            let taby = document.querySelector('#taby');
            let student =document.querySelector('#student');
            let td= document.querySelector('#td');
            let btn = document.querySelector('#btn');
            let btn1 = document.querySelector('#btn1');
            let str='';
            // let obj={};
            let arr=[];
             // Add a monitor , And set it as a click event
            btn.addEventListener('click',()=>{
                // The names and grades entered by the user are wrapped into objects and transferred to the array , And arranged in order
            arr.push({"name":names.value,"scroe":taby.value});
            // adopt map machining , Get... In the array item value
            str=arr.map((item)=>{
                // Get students' names and grades through deconstruction
                const{name,scroe}=item;
                // By return value , Print out the above content and return it to str
                return `<li> full name :${name}, achievement :${scroe}</li>`;
            }) 
            // The above str Print the contents of to the page
              student.innerHTML=str
           }).join( )
            // Add a monitor , And set it as a click event
           btn1.addEventListener('click',()=>{
               // adopt filter() Filter out the data that meets the conditions
             let newArray= arr.filter(item=>item.scroe>60);
             // Define a connection string variable
             let str1 = '';
            // adopt map machining , Get... In the array item value
             str1=newArray.map(item =>{
                  // Get students' names and grades through deconstruction
                const {name,scroe}=item;
                // By return value , Print out the above content and return it to str1
                return `<li> full name :${name}, achievement :${scroe}`;
             })
                 // The above str1 Print the contents of to the page
             td.innerHTML=str1;
           }).join( )

Implement case ：