Отобразить соответствующее значение параллельного массива до 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!"
}

Вы перезаписываете свою переменную внутри l oop до тех пор, пока не закончится l oop, поэтому вы получаете последний элемент массива. Попробуйте мой код.