使用到了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>