Javascript 如何在不重新加载空白页输出的情况下从选项选择中输出

Question

重新调整问题的措辞。我有以下代码。我分别有一个 HTML 文件和 JS 文件。我已将我的 css 文件设置为所有边距等，并输出一些文本...因此 css 边距和颜色有效。当按下下拉菜单并调用函数 displayArray() 时，我所有的 css 调整都消失了，输出就像我将要输入的屏幕截图。我认为错误在 document.write

对不起，我不善于解释，如果有人理解我的话，你知道需要哪一行代码吗？谢谢

function menu() {
  var input = document.getElementById("opt").value;
  switch (input) {
    case "1":
      Numbers(1, 1000);
      BS();
      displayArray();
      break;
  }
}


function displayArray(){  
  //Display Array 
  for (var i= 0 ; i <length; i++) {
    document.write(arr[i]);
  } 
}

<div class="select">
  <select id="opt" onChange="menu()">
    <option value="0" selected>Sorting</option>
    <option value="1">bubble sort</option>
    <option value="2">selection sort</option>
    <option value="3">quick sort</option>
    <option value="4">insertion sort</option>
  </select>
</div>
<script>
  function option() {
    menu();
  }
</script>

Answer 1

给你。我替换了缺失的函数来向您展示一个工作示例。

function menu() {
  var input = document.getElementById("opt").value;
  switch (input) {
    case "1":
      //window.confirm("Bubble Sort"); Don't need this
      var numberstoSort = Numbers(1, 1000);
      var sortedNumbers = BubbleSort();
      displayArray(sortedNumbers);
      break;
  }
}

function Numbers(min, max) {
  // Use your min/max to get the numbers in random order
  // example list below of 10 numbers
  return "878, 436, 196, 669, 49, 900, 215, 106, 747, 529";
}

function BubbleSort(numberstoSort) {
  // Perform your sort
  return "49, 106, 196, 215, 436, 529, 669, 747, 878, 900";
}

function displayArray(sortedNumbers) {
  // Standard Javascript
  document.getElementById("results").innerHTML = "Your sorted numbers are: " + sortedNumbers;

  // JQuery answer below
  //$("div.results").text("Your sorted numbers are: " + sortedNumbers);
}

<div class="select">
  <select id="opt" onChange="menu()">
    <option value="0" selected>Sorting</option>
    <option value="1">bubble sort</option>
    <option value="2">selection sort</option>
    <option value="3">quick sort</option>
    <option value="4">insertion sort</option>
  </select>
</div>

<div id="results"></div>

Javascript 如何在不重新加载空白页输出的情况下从选项选择中输出

Javascript how to output from option selection without reloading output in a blank page

html

javascript

page-refresh