Outputting an array each iteration of a for loop

Question

I have a script which takes number inputs from user, assigns them to an array, then uses the bubble sort method to put these numbers in order.

Everything is working great, but I can't seem to figure out how to output the contents of the array AS it is being changed each iteration. Basically, I want to watch it in action on a new line for each outer for() loop cycle.

function sortFunction() { var totalNums = prompt("How many numbers would you like to enter?",""); var numsArray = []; for(i=0; i<totalNums; ++i) { var nums = prompt("Please enter number " ,""); if(nums != 'x') { numsArray[i] = parseInt(nums); document.getElementById("unsorted").innerHTML = "Orignal Numbers: " + numsArray; } } var length = numsArray.length; var swapped; do { swapped = false; for (var j=0; j < length-1; j++) { if (numsArray[j] > numsArray[j+1]) { var temp = numsArray[j]; numsArray[j] = numsArray[j+1]; numsArray[j+1] = temp; swapped = true; } } document.getElementById("sorted").innerHTML = (numsArray); //This is where I am needing help } while (swapped); }

<p> Click the button to enter and display an array of numbers! </p> <button onclick="sortFunction()">Click Me</button> <div id ="unsorted">Unsorted</div> <div id ="sorted">Sorted</div>

where u output the contents of the array AS it is being changed each iteration? — Amaresh S M
– Amaresh S M, Commented Sep 29, 2019 at 5:12
document.getElementById("sorted").innerHTML = (numsArray); but I realize that is just overwriting what is there each time instead of displaying it on a new line — Tman
– Tman, Commented Sep 29, 2019 at 5:18
Not exactly sure what you want, but have you tried innerHTML += something, or storing the intermediate stages in an array of arrays? — ggorlen
– ggorlen, Commented Sep 29, 2019 at 5:20
@Tman If you like to highlight exact changes in each iteration please see my update — Masoud Keshavarz
– Masoud Keshavarz, Commented Sep 29, 2019 at 5:52

symlink · Accepted Answer · 2019-09-29 05:21:04Z

You were very close. All I did was change the operator on the innerHTML line to += instead of =. I also added a line to clear out the "sorted" queue each time, and some formatting for the results.

function sortFunction() { var totalNums = prompt("How many numbers would you like to enter?", ""); var numsArray = []; document.getElementById("sorted").innerHTML = ""; for (i = 0; i < totalNums; ++i) { var nums = prompt("Please enter number ", ""); if (nums != 'x') { numsArray[i] = parseInt(nums); document.getElementById("unsorted").innerHTML = "Orignal Numbers: " + numsArray; } } var length = numsArray.length; var swapped; let x = 0; do { x++; swapped = false; for (var j = 0; j < length - 1; j++) { if (numsArray[j] > numsArray[j + 1]) { var temp = numsArray[j]; numsArray[j] = numsArray[j + 1]; numsArray[j + 1] = temp; swapped = true; } } document.getElementById("sorted").innerHTML += "Step " + x + ": " + (numsArray) + "<br>"; //This is where I am needing help } while (swapped); }

<p> Click the button to enter and display an array of numbers! </p> <button onclick="sortFunction()">Click Me</button> <div id="unsorted">Unsorted</div> <div id="sorted">Sorted</div>

Thanks, I actually used a combination of two different answers here since both of them by themselves didn't seem to give the desired effect. This ended up working: document.getElementById("sorted").innerHTML += "<div>" + "Iteration " + count + " - " + numsArray + "</div>";

Esaith · Accepted Answer · 2019-09-29 05:20:30Z

Add

document.getElementById("sorted").innerHTML += "<div>" + numsArray[i] + </div>;

within the brackets of your for-loop

Masoud Keshavarz · Accepted Answer · 2019-09-29 05:55:30Z

I added some code so you can highlight changes in each iteration

function sortFunction() { var totalNums = prompt("How many numbers would you like to enter?",""); var numsArray = []; for(i=0; i<totalNums; ++i) { var nums = prompt("Please enter number " ,""); if(nums != 'x') { numsArray[i] = parseInt(nums); document.getElementById("unsorted").innerHTML = "Orignal Numbers: " + numsArray; } } var length = numsArray.length; var swapped; let sortingProcessRecorder = ''; let counter = 1; do { swapped = false; for (var j=0; j < length-1; j++) { if (numsArray[j] > numsArray[j+1]) { var temp = numsArray[j]; numsArray[j] = '<span style=\"color:red;\">' + numsArray[j+1] + '</span>'; numsArray[j+1] = '<span style=\"color:red;\">' + temp + '</span>'; swapped = true; } sortingProcessRecorder += '<b>' + counter++ + ': </b>' + numsArray + '<br />'; numsArray[j] = stripHtml(numsArray[j]) numsArray[j + 1] = stripHtml(numsArray[j + 1]) } } while (swapped); document.getElementById("sorted").innerHTML = 'Sorting Process: <br />' + sortingProcessRecorder; } function stripHtml(html) { var tmp = document.createElement("DIV"); tmp.innerHTML = html; return tmp.textContent || tmp.innerText || ""; }

<p> Click the button to enter and display an array of numbers! </p> <button onclick="sortFunction()">Click Me</button> <div id ="unsorted">Unsorted</div> <div id ="sorted">Sorted</div>

Collectives™ on Stack Overflow

Outputting an array each iteration of a for loop

3 Answers 3

1 Comment

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Related