有没有办法对 Javascript 中的用户输入进行冒泡排序？

Question

我想允许用户输入数字或生成随机数。然后我想让他对显示的数字进行冒泡排序（随机生成的数字或用户输入的数字）。关于如何对该特定数组进行冒泡排序的任何建议，即使它没有事先定义？这是我目前的代码：

感谢您的帮助

main.js

function randomNumbers() {
var num = document.getElementById("demo").innerHTML = Array.from({length: 30}, ()=>   Math.floor(Math.random() * 100));

}


function bubbleSort(arrayToSort) {
  var swapped;
  do {
    swapped = false;
    for (var i = 0; i < arrayToSort.length - 1; i++) {
      if (arrayToSort[i] > arrayToSort[i + 1]) {
        var temp = arrayToSort[i];
        arrayToSort[i] = arrayToSort[i + 1];
        arrayToSort[i + 1] = temp;
        swapped = true;
      }
    }
  } while (swapped);
}


function createList() {
    
    var number = prompt("Enter a maximum of 20 numbers, seperated by a comma");
    document.getElementById("outputnumber").innerText = number;
    
    }
 
function createSortedArray() {
var list = createList();
bubbleSort(list);
document.getElementById("sort").innerText = list;
  
  }

index.html

<body>

  <h1>Javascript Assignment</h1>
  <hr>
  <h3>Computer Platforms and Operating Systems - CIS 1102</h3>


  <p>Choose one of the following to create a list of numbers:</p

  <br>
  <p>
    <h4>i) Input Your Own Numbers</h4>
  </p>
 

 
  <p>
    <button onclick="createList(); " id="display" >Input Numbers</button>
  </p>

  <h4>ii) Random Generator</h4>
 
 
  <p>
  
    <input type = "button" onclick = "randomNumbers();" value = "Generate 30      Numbers" />
    
  </p>
  
  <br>
  <br>
  <br>
  
  <p id ="outputnumber"></p>
  <p id="demo"></p>


  <br>
  <hr>
  <br>
  <br>

  <p>Choose one of the following to sort the numbers:</p>

  <p>
      <button onclick="createSortedArray()" id = "bubble">Bubble sort</button>
  </p>


  <p>or</p>

  <p>
      <button onclick="" id = "bubble">Selection sort</button>
  </p>

  <p id="sort"></p>

  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>

  <hr>



</body>

Answer 1

您需要 return 来自 randomNumbers 和 createList 的数组。在 randomNumbers 中，方法末尾为 return num，在 createList 中为 return number.split(",")。然后只需将 returned 数组传递给您的 bubbleSort 方法，它应该可以工作

Answer 2

我不会在函数 createSortedList 中再次调用 createList，因为那时我们可能假设用户已经输入了一个列表，或者创建了一个随机列表。

而是让createSortedList 读取之前写入HTML的列表，用逗号分隔，并将每个元素转换为数字数据类型:

function createSortedArray() {
    // Don't call createList(), instead read the array from the document:
    var list = document.getElementById("outputnumber").innerText.split(",").map(Number);
    bubbleSort(list);
    // It probably makes sense to write the result to the same HTML element:
    document.getElementById("outputnumber").innerText = list;
}

我也会去掉 demo HTML 元素，因为您希望随机生成的列表像手动输入列表一样作为排序的输入。所以在函数 randomNumbers 中将“demo”替换为“outputnumber”。并将变量 var num 放入该函数中——它不起作用。

所以：

function randomNumbers() {
    document.getElementById("outputnumber").innerHTML = Array.from({length: 30}, ()=>   Math.floor(Math.random() * 100));
}

function bubbleSort(arrayToSort) {
  var swapped;
  do {
    swapped = false;
    for (var i = 0; i < arrayToSort.length - 1; i++) {
      if (arrayToSort[i] > arrayToSort[i + 1]) {
        var temp = arrayToSort[i];
        arrayToSort[i] = arrayToSort[i + 1];
        arrayToSort[i + 1] = temp;
        swapped = true;
      }
    }
  } while (swapped);
}


function createList() {    
    var number = prompt("Enter a maximum of 20 numbers, seperated by a comma");
    document.getElementById("outputnumber").innerText = number;
}
 
function createSortedArray() {
    var list = document.getElementById("outputnumber").innerText.split(",").map(Number);
    bubbleSort(list);
    document.getElementById("outputnumber").innerText = list;
}

<p>Choose one of the following to create a list of numbers:</p>

<button onclick="createList();" id="display">Input Numbers</button> or
<button onclick = "randomNumbers();">Generate 30 Numbers</button>   
<p id ="outputnumber">4,1,2,3</p>
<button onclick="createSortedArray()" id = "bubble">Bubble sort!</button>

有没有办法对 Javascript 中的用户输入进行冒泡排序？

Is there a way to Bubble sort user input in Javascript?

javascript

arrays

user-input

bubble-sort