配列を並べ替えてHTMLページに表示するのに手助けが必要

Question

私のHW割り当てでは、ユーザーが整数を入力し、ソート方法なしで並べ替えられた配列のHTMLに出力する必要があります。私はこのコードを持っていて、ユーザーの入力を要求しますが、整数はページに表示されません。

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

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

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

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

 
    function searchNum() { 
 
    var m = parseInt(prompt("Enter num to be searched: ","0")); 
 
\t var found = binarySearch(arr, m); 
 
\t var outputSearch = document.getElementById('outputSearch'); 
 
\t 
 
    if (found == -1) { 
 
\t outputSearch.append("Number not found"); 
 
\t } else { 
 
\t 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>

Answer 1

outputSortedは（DOM要素であり、付加）その要素の関数ではありません。それよりむしろ、追加するビットごとにinnerHTML + =を使用します。下記参照。そして、それらが私が作った唯一の変化であることに注意してください。だからあなたの醜いレンダリングされたHTMLは、それが何であるかです。あなたは:)をデバッグするために、ブラウザから `にconsole.log（）`と開発ツールを使用することができます

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 : \t \t " 
 

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

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

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

 
    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>