Untitled

<!DOCTYPE html>
<html>
<head>
    <title>Prak Sorting</title>
</head>
<body>
    <h1>Insertion Sort</h1>
    <span>Masukan Nilai : </span>
    <br>
    <input type="text" id="txtMasuk">
    <br>
    <input type="button" onclick="btnMasuk()" value="Input">
    <input type="button" onclick="btnLihat()" value="Hasil Sorted">
    <br>
    <br>
    <span>Hasil Input Data : </span>
    <br>
    <textarea id="txtAwal"></textarea>
    <br>
    <span>Hasil Sorted : </span>
    <br>
    <textarea id="txtAkhir"></textarea>
    <script type="text/javascript">
        var data = [];
        var i,wall,j;

        function btnMasuk() {
            data.push(document.getElementById("txtMasuk").value);
            document.getElementById("txtAwal").value = data.join(" , ");
            txtMasuk.value = "";
            txtMasuk.focus();
        }
        function btnLihat() {
            console.log("data awal"+data)
            for (i = 1; i < data.length; i++)
            {
                console.log("i:"+i);

                wall = parseInt(data[i]);
                j = i - 1;
                console.log("wall:"+wall);
                console.log("j"+j)

                while(j >= 0 && data[j] > wall)
                {
                    console.log("While True");
                    console.log("j: "+j);
                    data[j + 1] = data[j];
                    console.log("data[j+1]"+data[j+1]);
                    console.log("data while"+data);
                    j--;
                }
                data[j + 1] = wall;
                console.log("wall: "+wall);
                console.log("data[j+1] bwh: "+data[j+1]);
                console.log("data swap"+data);
            }
            document.getElementById("txtAkhir").value = data.join(" , ");
        }

    </script>

</body>
</html>