如何在forEach中为所有数据（数组）创建他们自己的ElementId？

Question

在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}&nbsp;${student.lastName}</h2>
                            <div class="others"><a href="email:&nbsp;${student.email}">${student.email}</a></div>
                            <div class="others">Company:&nbsp;${student.company}</div>
                            <div class="others">Skill:&nbsp;${student.skill.replace(/\s/g,'&nbsp;')}</div>`
                            
        let htmlSegment2 =  `<div class="others">Average&nbsp;Grade:&nbsp;${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) + ':&nbsp;' + 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();

Answer 1

页面元素的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="+";
    }
}