How do i loop through an array and display user input with indexes without the user input replicating?
Current output i'm getting:
Feedback 1
123456
Feedback 2
123456
The expected output for the case below should be:
Feedback 1
123
Feedback 2
456
<!DOCTYPE html>
<html>
<head>
<script src="script.js" type="text/javascript"> </script>
</head>
<body>
<h2>Feedback Form</h2><br>
<form>
Enter Feedback : <textarea rows="3" cols="20" id="feedback"></textarea><br><br>
<input type="button" value="Submit Feedback" id="create" onclick="addFeedback()"><br><br>
<input type="button" value="View Feedback" id="view" onclick="displayFeedback()"><br><br>
</form>
<div id="result"></div>
</body>
</html>
var myArray = [];
var myFeedback = document.getElementById("feedback");
var displayBox = document.getElementById("result");
function addFeedback(){
//Store feedback into array
myArray.push(myFeedback.value);
//Clear textbox
myFeedback.value = "";
//Display message
displayBox.innerHTML = "Successfully Added Feedback Details!";
}
function displayFeedback(){
displayBox.innerHTML = "";
for(var i = 0; i < myArray.length; i++){
displayBox.innerHTML += "Feedback " + (i+1) + "<br/>" + myArray.join();
}
}
Use myArray[i] instead of join. Or more modern approach:
let innerHTML = "<ul>";
myArray.forEach((value, index) => {
innerHTML += `<li>Feedback ${index+1}: <br /> ${value}</li>`;
});
innerHTML += "</ul>";
displayBox.innerHTML = innerHTML;