creating a list of books in Javascript

Question

I'm having a problem trying to sort the booklist I'm creating for an assignment. The titles of the books are supposed to move with the dates and be sorted from oldest to newest after clicking the button. However, I don't know why Don Quixote and Moby Dick don't appear after the button is clicked. Is there something that I am missing or I did wrong? Help is appreciated.

    var names = new Array("To Kill a Mockingbird","Jaws","Don Quixote","Moby-Dick","Northern Lights");
    var published = new Array("July 11, 1960", "February 1, 1974","July 11, 1615","October 18, 1851","November 12, 1995");

function display()
{
    for(var i = 0; i < names.length; i++)
    {
        var temp = "cell" + i + "0";
        document.getElementById(temp).innerHTML = names[i];
        temp = "cell" + i + "1";
        document.getElementById(temp).innerHTML = published[i];
    }
    
}

function SortIt( )
{
    var oldest  = 0;
    var index = 0; 
    var j = 0;
    var k = 0;
    var count = 0;
    var temp = 0; var temp2 = "";
    
    count = published.length;
    count = names.length;
    
    for (k =0; k <= (count -1); k++ )
    {
        oldest = Date.parse(published[k]);
        index = k;
         
        for (j = (k + 1); j <= (count-1); j++)
        {
            
            if (Date.parse(published[j]) < oldest ) 
            {
                oldest = Date.parse(published[j]);
                index = j;
                
            }
        }
        if(k != index)
        {
            temp = published[k];
            published[k] = published[index];
            published[index] = temp;
            temp2 = names[k];
            names[k] = index[k];
            names[index] = temp2;
        }
    }
    display();
}

<!DOCTYPE html>
<html lang="en">
<head>
<title>Program 9 - Selection Sort</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />


<script type="text/javascript" src="Carbajal_Lab9.js"></script>
</head>
<body  onload="display()">
<h1>Program 9 - Selection Sort</h1>

<table id ="workTable" border ="2">
    <tr>
    <td> <span id = "cell00"/> </td>
    <td> <span id = "cell01"/> </td>
    </tr>
    
    <tr>
    <td> <span id = "cell10"/> </td>
    <td> <span id = "cell11"/> </td>
    </tr>
    
    <tr>
    <td> <span id = "cell20"/> </td>
    <td> <span id = "cell21"/> </td>
    </tr>
    
    <tr>
    <td> <span id = "cell30"/> </td>
    <td> <span id = "cell31"/> </td>
    </tr>
    
    <tr>
    <td> <span id = "cell40"/> </td>
    <td> <span id = "cell41"/> </td>
    </tr>

</table>
<form>
    <input type="button" value="Sort" onclick="SortIt()"/>
</form>
</body>
</html>

`names[k] = index[k];` should that be `names[k] = names[index];`? — Vincent Ramdhanie, Jul 22 '21 at 21:14
It worked, thank you again. I don't know how I missed such a simple mistake. — , Jul 22 '21 at 21:20

StarshipladDev · Answer 1 · 2021-07-22T21:33:04.450

In

 temp = published[k];
            published[k] = published[index];
            published[index] = temp;
            temp2 = names[k];
            names[k] = index[k];
            names[index] = temp2;

you are setting names[k] as index[k], even though index is a int/counter.

What works for me is creating clones of published and names, so that when you are trying to put in a value from the old list, you can reference, for example, oldnames.

The variable count is also set as 2 different values in a row,. I have replaced this section to a call to Math.min, which picks the smallest of the 2 array lengths (Preventing invalid index queries )

Lastly I've saved you some html writing by having a loop in the javascript that creates the inital table

var names = new Array("To Kill a Mockingbird","Jaws","Don Quixote","Moby-Dick","Northern Lights");
    var published = new Array("July 11, 1960", "February 1, 1974","July 11, 1615","October 18, 1851","November 12, 1995");
var count = Math.min(names.length,published.length);
function drawTable(){
    for(var i = 0; i < count; i++)
    {
        document.getElementById('workTable').innerHTML+="<tr>"+
        "<td> <span id=\"cell"+i+"0\""+"/></td>"+
        "<td> <span id=\"cell"+i+"1\""+"/></td>"+
        "</tr>"
    }
}
function display()
{
    for(var i = 0; i < count; i++)
    {
        var temp = "cell" + i + "0";
        document.getElementById(temp).innerHTML = names[i];
        temp = "cell" + i + "1";
        document.getElementById(temp).innerHTML = published[i];
    }
    
}

function SortIt( )
{
    var oldPublished=published.slice();
    var oldNames = names.slice();
    var oldest  = 0;
    var index = 0; 
    var j = 0;
    var k = 0;
    var temp = 0; var temp2 = "";
    
    for (k =0; k <= (count -1); k++ )
    {
        oldest = Date.parse(published[k]);
        index = k;
         
        for (j = (k + 1); j <= (count-1); j++)
        {
            
            if (Date.parse(published[j]) < oldest ) 
            {
                oldest = Date.parse(published[j]);
                index = j;
                
            }
        }
        if(k != index)
        {
            temp = published[k];
            published[k] = oldPublished[index];
            published[index] = oldPublished[k];
            temp2 = names[k];
            names[k] = oldNames[index];
            names[index] = oldNames[k];
        }
    }
    display();
}
drawTable();

<!DOCTYPE html>
<html lang="en">
<head>
<title>Program 9 - Selection Sort</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />


<script type="text/javascript" src="Carbajal_Lab9.js"></script>
</head>
<body  onload="display()">
<h1>Program 9 - Selection Sort</h1>

<table id ="workTable" border ="2">
</table>
<form>
    <input type="button" value="Sort" onclick="SortIt()"/>
</form>
</body>
</html>

creating a list of books in Javascript

1 Answers1