Question

下面的代码是一个带有JS的简单HTML页面，它将使用插入排序对5个数字进行排序。问题是输出不会打印。

   <html>
    <script>
    function Ascending()
    {
    var array = new Array();
    array[0]=document.getElementById("1").value;
    array[1]=document.getElementById("2").value;
    array[2]=document.getElementById("3").value;
    array[3]=document.getElementById("4").value;
    array[4]=document.getElementById("5").value;

    var j, temp;

        for (var i = 1; i < array.length; i++){
            temp = array[i];
            j = i - 1;      
            while ((j >= 0) && (temp < array [j]))  
            {
                array[j + 1] = array[j];        
                j--;                    
            }
            array[j + 1] = temp;                
        }


        for (var i = i; i <array. length; i++)
    {
    var output =document.getElementById("display");
    output.innerHTML+=numbers[i]+ ' , ';
    }
    }
    </script>

这是附加代码。

    <body>
    <h1 align="center">Sorting Five(5) Numbers<h1>
    <table bgcolor="yellow" border="4" align="center" bordercolor="black" >
    <tr>
        <td>
            <p>Enter First Number: <input type="text"  id="1" size="4"></p>
        </td>
    </tr>

    <tr>
        <td>
            <p>Enter Second Number: <input type="text"  id="2" size="1"></p>
        </td>
    </tr>

    <tr>
        <td>
            <p>Enter Third Number: <input type="text"  id="3" size="4"></p>
        </td>
    </tr>

    <tr>
        <td>
            <p>Enter Fourth Number:<input type="text"  id="4" size="3"></p>
        </td>
    </tr>

    <tr>
        <td>
            <p>Enter Fifth Number:<input type="text"  id="5" size="5"></p>
        </td>
    </tr>
    <tr>
        <td align="center"> 
            <button type="button" onclick="Ascending()">Ascending</button>
        </td>
    </tr>

    <tr>
        <td>
            <p id="display">Result:       </p>
        </td>
    </tr>

    <tr>
        <td align="center">
                <a href="insertionsort.html">
                <button>Reset</button>
                </a>
        </td>
    </tr>
    </table>
    </body>
    </html>

如果您可以请给我建议和反馈：）

Answer 1

有一些拼写错误导致你麻烦。看起来某些变量已重命名，但您没有重命名它们的所有实例。此外，您使用i = i代替i = 0开始最终循环。

// was: pos = i - 1;        
// should be:
j = i - 1;

// was: for (var i = i; i <array. length; i++)
// should be:
for (var i = 0; i <array.length; i++)

// was: output.innerHTML+=numbers[x]+ ' , ';
// should be:
output.innerHTML += array[i] + ' , ';

一个工作示例：http://codepen.io/paulroub/pen/zqsuC

Answer 2

除此之外 - 我意识到你只是在代码中使用了排序例程 - 你可以根据需要轻松地减小函数的大小：

function Ascending() {

  // use class names and you can grab all the input elements at once
  var inputs = document.getElementsByClassName('number');

  // convert the arrayList to a normal array
  var arr = Array.prototype.slice.call(inputs);

  // create a new array containing only the values
  var valArr = arr.map(function (el) { return el.value; });

  // create a string from the sorted and joined array of numbers
  var str = valArr.sort(function (a, b) { return a - b; }).join(', ');

  // output the string
  var output = document.getElementById('display');
  output.innerHTML = str;
}

Demo

看不到输出

2 个答案: