看不到输出答案

【问题标题】：Can't see the output看不到输出
【发布时间】：2014-05-07 15:08:09
【问题描述】：

下面的代码是一个简单的带有 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>

如果可以的话，请给我建议和反馈:)

【问题讨论】：

首先考虑变量“j”如何获得其初始值。

标签： javascript html arrays sorting insertion-sort

【解决方案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

【讨论】：

非常感谢。是的，我实际上重命名了变量，因为该代码是我冒泡排序的原始代码，我不想混淆，因为我打算在一个 html 中混合这两种排序。对不起，我的错。

【解决方案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

【讨论】：