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>

Answer 1

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>

Answer 2

Add

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

within the brackets of your for-loop

Answer 3

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>