#今日说码栏目# 第二十九集 JS找到一组同学中考试分数及格的第一个同学并输出到页面上；_js实现找到一组同学中考试分数及格的第一个同学并输出到页面上。-CSDN博客

本文链接：https://blog.csdn.net/abner_/article/details/126761006

使用到了dom、const声明对象、箭头函数、模板字符串。

1、首先我们通过document获得按钮和分数。

<div>
    及格的第一个同学<span id="info">姓名:<span id="realname"></span>分数:<span id="score"></span></span>
  </div>
  <script>
    let info = document.getElementById("info");
    let realname = document.getElementById("realname");
    let score = document.getElementById("score");
</script>

2、写一个students对象。

const students = [
      { realname: "张三", score: 59 },
      { realname: "李四", score: 40 },
      { realname: "王五", score: 69 },
      { realname: "赵六", score: 79 },
    ]

3、箭头函数，渲染一下。

const Info = students.find(item => item.score >= 60);
    let str1 = `${Info.realname}`;
    realname.innerHTML = str1;
    let str2 = `${Info.score}`;
    score.innerHTML = str2;

<!DOCTYPE html>
<html lang="en">
    
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>1：找到一组同学中考试分数及格的第一个同学并输出到页面上；</title>
</head>
       
<body>
  <div>
    及格的第一个同学<span id="info">姓名:<span id="realname"></span>分数:<span id="score"></span></span>
  </div>
  <script>
    let info = document.getElementById("info");
    let realname = document.getElementById("realname");
    let score = document.getElementById("score");
    
    const students = [
      { realname: "张三", score: 59 },
      { realname: "李四", score: 40 },
      { realname: "王五", score: 69 },
      { realname: "赵六", score: 79 },
    ]
    
    const Info = students.find(item => item.score >= 60);
    let str1 = `${Info.realname}`;
    realname.innerHTML = str1;
    let str2 = `${Info.score}`;
    score.innerHTML = str2;
    
  </script>
</body>
</html>