需要帮助排序数组并将其显示在 HTML 页面上答案

【问题标题】：Need help sorting array and displaying it on the HTML page需要帮助排序数组并将其显示在 HTML 页面上
【发布时间】：2017-02-23 19:46:36
【问题描述】：

我的硬件分配要求我让用户输入整数，并在没有排序方法的情况下以排序数组的形式出现在 HTML 中。我有这段代码，它要求用户输入，但整数没有出现在页面上。

<script type="text/javascript">
  var arr = [];

  function addNum() {
    var n = prompt("How many integrs?", "0");
 	var num = parseInt(n); 
 	for (var i = 0; i < num; i++) {
 	  arr[i] = parseInt(prompt("Enter next integer: ","0"));
    }

    var outputSorted = document.getElementById('outputSorted');
    outputSorted = "";
    outputSorted.append("Input array :		");
  
    for (var i = 0; i < num; i++) {
 	  outputSorted.append(arr[i]+"	");
    }
 	
    bubbleSort(arr);
 	outputSorted.append("Sorted array :		");
 			
    for (var i = 0; i < num; i++) {
 	  outputSorted.append(arr[i]+"	");
    }
  }

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

  function searchNum() {
    var m = parseInt(prompt("Enter num to be searched: ","0"));
	var found = binarySearch(arr, m);
	var outputSearch = document.getElementById('outputSearch');
	
    if (found == -1) {
	  outputSearch.append("Number not found");
	} else {
	  outputSearch.append("Number found at index : " + (found + 1));
    }
  }

  function binarySearch(array, targetValue) {
    var min = 0;
    var max = array.length - 1;
    var guess;

    while (min <= max) {
      guess = Math.floor((max + min) / 2);

      if (array[guess] === targetValue) {
        return guess;
      }
      else if (array[guess] < targetValue) {
        min = guess + 1;
      }
      else {
        max = guess - 1;
      }
    }
    return -1;
  }
</script>

【问题讨论】：

您可以使用console.log() 和浏览器中的开发人员工具进行调试:)。 w3schools.com/js/js_output.asp
也可能在这里outputSorted = "";你的意思是outputSorted.innerHTML = "";

标签： javascript arrays sorting integer

【解决方案1】：

outputSorted 是一个 DOM 元素，而 append() 不是该元素的函数。而不是这样，对您要添加的每个位使用innerHTML +=。见下文。请注意，这些是我所做的唯一更改。所以你丑陋的渲染 HTML 就是这样。

  var arr = [];

  addNum = function addNum() {
    var n = prompt("How many integrs?", "0");
    var num = parseInt(n);
    for (var i = 0; i < num; i++) {
      arr[i] = parseInt(prompt("Enter next integer: ", "0"));
    }

    var outputSorted = document.getElementById('outputSorted');
    outputSorted.innerHTML += "Input array :		"

    for (var i = 0; i < num; i++) {
      outputSorted.innerHTML += arr[i] + "	";
    }

    bubbleSort(arr);
    outputSorted.innerHTML += "Sorted array :		";

    for (var i = 0; i < num; i++) {
      outputSorted.innerHTML += arr[i] + "	";
    }
  }

  function bubbleSort(a) {
    var swapped;

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

  function searchNum() {
    var m = parseInt(prompt("Enter num to be searched: ", "0"));
    var found = binarySearch(arr, m);
    var outputSearch = document.getElementById('outputSearch');

    if (found == -1) {
      outputSearch.innerHTML += ("Number not found");
    } else {
      outputSearch.innerHTML += ("Number found at index : " + (found + 1));
    }
  }

  function binarySearch(array, targetValue) {
    var min = 0;
    var max = array.length - 1;
    var guess;

    while (min <= max) {
      guess = Math.floor((max + min) / 2);

      if (array[guess] === targetValue) {
        return guess;
      } else if (array[guess] < targetValue) {
        min = guess + 1;
      } else {
        max = guess - 1;
      }
    }
    return -1;
  }

<button onclick="addNum()">
Add some!
</button>
<div id="outputSorted">

</div>
<div id="outputSearch">

</div>

【讨论】：