Question

The code below is a simple HTML page with JS that will sort 5 numbers using the insertion sort. The problem is that the output will not print.

   <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>

This is the additional codes. 

    <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>

And if you may please give me suggestions and feedback :)

Was it helpful?

Solution

There are a number of typos causing you trouble. It looks like some variables were renamed, but you didn't rename all occurrences of them. Also, you're starting the final loop with i = i instead of 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] + ' , ';

A working example: http://codepen.io/paulroub/pen/zqsuC

OTHER TIPS

As as aside - and I realise you were just practicing with the sort routine in your code - you can quite comfortably reduce the size of the function should you want to:

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

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top