将对应的并行数组值显示到 html

Question

我目前有两个数组，nameArray 和 markArray，当用户输入他们的名字和标记时会添加它们。我想在单击按钮时显示所有名称和标记，但有什么标记属于谁显而易见。我的尝试低于创建 displayInfo 但每当我尝试将其输出到 HTML 时，它只显示每个数组中的最后一个。

    if (Array.isArray(nameArray) && nameArray.length) {

        console.log("display all working");
       // var displayName = nameArray.toString();
        // var displayMark = markArray.toString();

        for(let i=0; i < nameArray.length; i++){

            var displayInfo = "";

            //var displayInfo = nameArray[i] + "<br/>" + markArray[i];
            //console.log(displayInfo)
            //document.getElementById("result").innerHTML = displayInfo;

            displayInfo += nameArray[i] + "<br/>" + markArray[i] + "";

        }

            document.getElementById("result").innerHTML = displayInfo

    }else{

        document.getElementById("result").innerHTML = "No result's have been entered! Please enter results before display them!"
    }


} ```

var name = document.getElementById("name").value;
var mark = document.getElementById("mark").value;

if(name == "" || mark == ""){

    document.getElementById("result").innerHTML = "An input field is empty please try again."

}else{

nameArray.push(name);
markArray.push(mark);

console.log(nameArray);

document.getElementById("result").innerHTML = name + "'s " + "results have been added to the system!"

}

}```

输出应该看起来像 John-4 Jack-6，只要能清楚地知道它是谁的结果。

Answer 1

if (Array.isArray(nameArray) && nameArray.length) {

    console.log("display all working");
    var displayInfo = [];
   // var displayName = nameArray.toString();
    // var displayMark = markArray.toString();

    for(let i=0; i < nameArray.length; i++){


        //var displayInfo = nameArray[i] + "<br/>" + markArray[i];
        //console.log(displayInfo)
        //document.getElementById("result").innerHTML = displayInfo;

        displayInfo.push(nameArray[i] + "<br/>" + markArray[i] + "");

    }
       displayInfo.forEach(single => {
            document.getElementById("result").innerHTML = single; 
       })



}else{

    document.getElementById("result").innerHTML = "No result's have been entered! Please enter results before display them!"
}

在循环结束之前，您将覆盖循环内的变量，这就是您获得数组最后一个元素的原因。试试我的代码。