Question

我有一个脚本，该脚本从用户那里获取数字输入，将它们分配给数组，然后使用冒泡排序方法将这些数字排序。

一切工作都很好，但是我似乎无法弄清楚如何输出数组的内容，因为每次迭代都会对其进行更改。基本上，我想在每个外部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>

for循环的每个迭代输出一个数组

3 个答案: