在 for 循環的每次迭代中輸出一個數組

Question

我有一個腳本，它從用戶那里獲取數字輸入，將它們分配給一個數組，然后使用冒泡排序方法將這些數字按順序排列。

一切都很好，但我似乎無法弄清楚如何 output 數組的內容，因為每次迭代都會更改它。 基本上，我想在每個外部 for() 循環循環的新行上觀察它的運行情況。

 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

你非常親近。 我所做的只是將 innerHTML 行上的運算符更改為+=而不是= 。 我還添加了一行來每次清除“排序”隊列，並對結果進行一些格式化。

 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

添加

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

在你的 for 循環的括號內

Answer 3

我添加了一些代碼，以便您可以突出顯示每次迭代中的更改

 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>