在JavaScript中编写HTML时，由于要从一个网站上fetch数据从而使用了forEach,但是要处理数据时却发现，相同的Id只能使用一次，下面的代码在执行change()函数时innerHTML只认准最终的赋值。如果我想在forEach中为所有用户（students）创建他们自己的elementId，该怎么做？还是说forEach这个思路根本上就不对？
async function GET() {
let url = 'https://api.hatchways.io/assessment/students';
try {
let res = await fetch(url);
return await res.json();
} catch (error) {
console.log(error);
}
}
function average(nums) {
let gradeSum = 0;
const len = nums.length;
for (let i = 0; i < len; i++) {
gradeSum = parseFloat(nums[i]) + gradeSum;
}
function change(){
if (cc==0){
cc=1;
document.getElementById(Id)="-";
}
else{
cc=0;
document.getElement0ById(Id)="+";
}
}
async function renderstudents() {
let S_user = await GET();
let html = '';
html += `<form action="" method="search_name">
<input type="text" name="fname" style='width:432px;margin-left:20px;;padding:15px;background-color: rgb(255, 255, 255);border: 0px;' placeholder="Search by name">
</form><HR align=center SIZE=1>`;
html += `<form action="" method="search_tag">
<input type="text" name="tag" style='width:432px;margin-left:20px;padding:15px;background-color: rgb(255, 255, 255);border: 0px;' placeholder="Search by tag">
</form>`;
S_user.students.forEach((student) => {
Id = student.firstName+student.lastName;
let htmlSegment1 = `<div class="user">
<HR align=center color=#000000 SIZE=2>
<img style="background-color: rgb(0,200,255);box-shadow: 2px 4px 5px;" src="${student.pic}" >
<h2>${student.firstName} ${student.lastName}</h2>
<div class="others"><a href="email: ${student.email}">${student.email}</a></div>
<div class="others">Company: ${student.company}</div>
<div class="others">Skill: ${student.skill.replace(/\s/g,' ')}</div>`
let htmlSegment2 = `<div class="others">Average Grade: ${average(student.grades)}</a><button id="${student.firstName+student.lastName}" onclick="change()">+</button></div>
<br />`
let htmlTag=`<form action="" method="adding_tag">
<input type="text" name="add_tag" style='width:60px;padding:15px;margin:center;background-color: rgb(255, 255, 255);' placeholder="Enter Tag">
</form>
</div>`;
let htmlGrade = '<div1>';
for(let i=0;i<student.grades.length;i++){
htmlGrade += 'Test' + parseFloat(i+1) + ': ' + student.grades[i] + '%' + '<br />';
}
html += htmlSegment1;
html += htmlSegment2;
html += htmlGrade+'</div1>';
html += htmlTag;
console.log(Id);
});
let container = document.querySelector(".container");
container.addEventListener("wheel", (event) => {
event.preventDefault();
container.scrollTop += event.deltaY;
});
container.innerHTML = html;
}
renderstudents();
页面元素的id应该是唯一的，id不要重复，重复的id用document.getElementById()或jquery的$("#id") 获取时，只能获取到第一个。
要获取多个元素时，应该用元素的class，并用getElementsByClassName()或jquery的$(".class")获取。
如果你一定要用id的话，也可以用 document.querySelectorAll("#id") 获取多个元素。
不用id， change(this) 传参this
<button id="${student.firstName+student.lastName}" onclick="change(this)">+</button>
change()函数改成
function change(t){
if (t.innerHTML=="+"){
t.innerHTML="-";
}
else{
t.innerHTML="+";
}
}
也是可以，不过change函数的ID应该从onclick（）事件上获取ID，你给change函数加个参数是可以获取到点了那个按钮的ID的
页面中ID是唯一的。所以你可以自行创建ID，然后放到页面中来。用各种获取元素的方式，包括jquery的选择器，标签选择器，ID选择器，类选择器等。或者用原生js的获取标签的方式。
以下是本js对应的index.html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fetch API Demo</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container"></div>
<script src="api/app.js"></script>
</body>
</html>
。