Title: Display corresponding parallel array value to html
Tags: javascript;html;arrays
Question: I currently have two arrays, nameArray and markArray which are added to when users input their name and mark. I want to display all names and marks at the click of a button but have what mark belongs to who obvious. My attempts are below creating displayInfo but whenever I try to output it to HTML it only shows the last one in each array.
if (Array.isArray(nameArray) &amp;&amp; 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/&gt;" + markArray[i];
//console.log(displayInfo)
//document.getElementById("result").innerHTML = displayInfo;
displayInfo += nameArray[i] + "<br/&gt;" + 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!"
The output should look something like John-4 Jack-6, just any way in which it is clear whos result it is.
Comment: Show us what your arrays look like and what your expected output looks like, that'll make it easier for us to help


Here is another answer: if (Array.isArray(nameArray) &amp;&amp; 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/&gt;" + markArray[i];
//console.log(displayInfo)
//document.getElementById("result").innerHTML = displayInfo;
displayInfo.push(nameArray[i] + "<br/&gt;" + markArray[i] + "");
displayInfo.forEach(single =&gt; {
document.getElementById("result").innerHTML = single;
})
}else{
document.getElementById("result").innerHTML = "No result's have been entered! Please enter results before display them!"
You are overwriting your variable inside your loop until the loop ends, which is why you get the last element of the array. Try my code.
Comment for this answer: I updated the code and its still doing the same, I have updated the code as well.

{'source': 'StackExchangeDataset', 'subset': 'stackoverflow.com', 'metadata': {'AnswerCount': 1, 'CommentCount': 1, 'ContentLicense': 'CC BY-SA 4.0', 'CreationDate': '2020:00:05/08/20', 'FavoriteCount': None, 'PostTypeId': 1, 'Tags': '<javascript><html><arrays>', 'Title': 'Display corresponding parallel array value to html', 'ViewCount': 83, 'id': 61682264, 'user_AboutMe': None, 'user_AccountId': 17791851.0, 'user_DisplayName': 'narom391', 'user_Reputation': 1.0, 'user_Views': 4.0, 'user_id': 12920661.0}}