'Reset button in JS is not working on HTML

I'm doing an exercise to practice array manipulation from Javascript to HTML so it can be showed in the computer screen, so far so good I managed to make a button work

This is what happens

  1. A table is populated from an Array (Original order)
  2. I programmed the button to sort Alphabetically A-Z (Order changes)

What I try to do:

  1. When I press the Reset button, I want the table to return to the way it was at the beginning (Original order)

let starWars = [
    {
        "name": "Luke Skywalker",
        "height": "172",
        "mass": "77",
        "hair_color": "blond",
        "skin_color": "fair",
        "eye_color": "blue",
        "gender": "male",
    },
    {
        "name": "C-3PO",
        "height": "167",
        "mass": "75",
        "hair_color": "n/a",
        "skin_color": "gold",
        "eye_color": "yellow",
        "gender": "n/a",
    },
    {
        "name": "R2-D2",
        "height": "96",
        "mass": "32",
        "hair_color": "n/a",
        "skin_color": "white, blue",
        "eye_color": "red",
        "gender": "n/a",
    },
    {
        "name": "Darth Vader",
        "height": "202",
        "mass": "136",
        "hair_color": "none",
        "skin_color": "white",
        "eye_color": "yellow",
        "gender": "male",
    },
    {
        "name": "Leia Organa",
        "height": "150",
        "mass": "49",
        "hair_color": "brown",
        "skin_color": "light",
        "eye_color": "brown",
        "gender": "female",
    },
    {
        "name": "Owen Lars",
        "height": "178",
        "mass": "120",
        "hair_color": "brown, grey",
        "skin_color": "light",
        "eye_color": "blue",
        "gender": "male",
    },
    {
        "name": "Beru Whitesun lars",
        "height": "165",
        "mass": "75",
        "hair_color": "brown",
        "skin_color": "light",
        "eye_color": "blue",
        "gender": "female",
    },
    {
        "name": "R5-D4",
        "height": "97",
        "mass": "32",
        "hair_color": "n/a",
        "skin_color": "white, red",
        "eye_color": "red",
        "gender": "n/a",
    },
    {
        "name": "Biggs Darklighter",
        "height": "183",
        "mass": "84",
        "hair_color": "black",
        "skin_color": "light",
        "eye_color": "brown",
        "gender": "male",
    },
    {
        "name": "Obi-Wan Kenobi",
        "height": "182",
        "mass": "77",
        "hair_color": "auburn, white",
        "skin_color": "fair",
        "eye_color": "blue-gray",
        "gender": "male",
    }
]
    
    //Popular tabla 
    construirTabla(starWars)

    function construirTabla(data) {
        let table = document.getElementById('starWars')

        for (let i = 0; i < data.length; i++) {
            let row = `<tr>
                            <td>${data[i].name}</td>
                            <td>${data[i].height}</td>
                            <td>${data[i].mass}</td>
                            <td>${data[i].hair_color}</td>
                            <td>${data[i].skin_color}</td>
                            <td>${data[i].eye_color}</td>
                            <td>${data[i].gender}</td>
                    </tr>`
            table.innerHTML += row
        }
    }

    //Buttons
    let sortAlpha = document.getElementById('alpha-button')

    sortAlpha.onclick = function () {
        const sortStarwars = 
        starWars.slice().sort(function(a, b) {
            if (a.name < b.name) {
                return -1
            }
            if (a.name > b.name) {
                return 1
            }
        });

        let table = document.getElementById('starWars')
        table.innerHTML = ''
        for (let i = 0; i < sortStarwars.length; i++) {
            let row = `<tr>
                            <td>${sortStarwars[i].name}</td>
                            <td>${sortStarwars[i].height}</td>
                            <td>${sortStarwars[i].mass}</td>
                            <td>${sortStarwars[i].hair_color}</td>
                            <td>${sortStarwars[i].skin_color}</td>
                            <td>${sortStarwars[i].eye_color}</td>
                            <td>${sortStarwars[i].gender}</td>
                    </tr>`
            table.innerHTML += row
        }
    }
    
    let resetTable = document.getElementById('reset-button')

    resetTable.onclick = function (reset) {
        console.log(starWars)
        document.getElementById('starWars').reset()
    }
th { 
color:#fff;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>StarWars Array </title>

    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"></head>

<header>
    <h1>Array with Objects</h1>
    <div class="input-group">
        <input type="text" class="form-control" placeholder="Ingresa tus valores" aria-label="Recipient's username with two button addons">
        <button class="btn btn-outline-success" type="button" id="save-button">Save</button>
        <button class="btn btn-outline-danger" type="button" id="reset-button">Reset</button>
        <button class="btn btn-outline-primary" type="button">Add</button>
        <button class="btn btn-outline-secondary" type="button" id="alpha-button">Sort A-Z</button>
        <button class="btn btn-outline-secondary" type="button" id="height-button">Sort Height</button>
        <button class="btn btn-outline-secondary" type="button">Sort gender</button>
        <button class="btn btn-outline-secondary" type="button">Add pet</button>
        <button class="btn btn-outline-secondary" type="button">Compare height</button>
    </div>
</header>


<body>
    <table class="table table-striped" id="tabla">
        <tr  class="bg-info">
            <th>Name</th>
            <th>Height</th>
            <th>Mass</th>
            <th>Hair Color</th>
            <th>Skin Color</th>
            <th>Eye Color</th>
            <th>Gender</th>
            <th>+Pet</th>
        </tr>
        
        <tbody id="starWars">
            
        </tbody>
    </table>
</body>

<script src="js/index.js"></script>
javascripthtml


Solution 1:[1]

let starWars = [
    {
        "name": "Luke Skywalker",
        "height": "172",
        "mass": "77",
        "hair_color": "blond",
        "skin_color": "fair",
        "eye_color": "blue",
        "gender": "male",
    },
    {
        "name": "C-3PO",
        "height": "167",
        "mass": "75",
        "hair_color": "n/a",
        "skin_color": "gold",
        "eye_color": "yellow",
        "gender": "n/a",
    },
    {
        "name": "R2-D2",
        "height": "96",
        "mass": "32",
        "hair_color": "n/a",
        "skin_color": "white, blue",
        "eye_color": "red",
        "gender": "n/a",
    },
    {
        "name": "Darth Vader",
        "height": "202",
        "mass": "136",
        "hair_color": "none",
        "skin_color": "white",
        "eye_color": "yellow",
        "gender": "male",
    },
    {
        "name": "Leia Organa",
        "height": "150",
        "mass": "49",
        "hair_color": "brown",
        "skin_color": "light",
        "eye_color": "brown",
        "gender": "female",
    },
    {
        "name": "Owen Lars",
        "height": "178",
        "mass": "120",
        "hair_color": "brown, grey",
        "skin_color": "light",
        "eye_color": "blue",
        "gender": "male",
    },
    {
        "name": "Beru Whitesun lars",
        "height": "165",
        "mass": "75",
        "hair_color": "brown",
        "skin_color": "light",
        "eye_color": "blue",
        "gender": "female",
    },
    {
        "name": "R5-D4",
        "height": "97",
        "mass": "32",
        "hair_color": "n/a",
        "skin_color": "white, red",
        "eye_color": "red",
        "gender": "n/a",
    },
    {
        "name": "Biggs Darklighter",
        "height": "183",
        "mass": "84",
        "hair_color": "black",
        "skin_color": "light",
        "eye_color": "brown",
        "gender": "male",
    },
    {
        "name": "Obi-Wan Kenobi",
        "height": "182",
        "mass": "77",
        "hair_color": "auburn, white",
        "skin_color": "fair",
        "eye_color": "blue-gray",
        "gender": "male",
    }
]
    
    //Popular tabla 
    construirTabla(starWars)

    function construirTabla(data) {
        let table = document.getElementById('starWars')

        for (let i = 0; i < data.length; i++) {
            let row = `<tr>
                            <td>${data[i].name}</td>
                            <td>${data[i].height}</td>
                            <td>${data[i].mass}</td>
                            <td>${data[i].hair_color}</td>
                            <td>${data[i].skin_color}</td>
                            <td>${data[i].eye_color}</td>
                            <td>${data[i].gender}</td>
                    </tr>`
            table.innerHTML += row
        }
    }

    //Buttons
    let sortAlpha = document.getElementById('alpha-button')

    sortAlpha.onclick = function () {
        const sortStarwars = 
        starWars.slice().sort(function(a, b) {
            if (a.name < b.name) {
                return -1
            }
            if (a.name > b.name) {
                return 1
            }
        });

        let table = document.getElementById('starWars')
        table.innerHTML = ''
        for (let i = 0; i < sortStarwars.length; i++) {
            let row = `<tr>
                            <td>${sortStarwars[i].name}</td>
                            <td>${sortStarwars[i].height}</td>
                            <td>${sortStarwars[i].mass}</td>
                            <td>${sortStarwars[i].hair_color}</td>
                            <td>${sortStarwars[i].skin_color}</td>
                            <td>${sortStarwars[i].eye_color}</td>
                            <td>${sortStarwars[i].gender}</td>
                    </tr>`
            table.innerHTML += row
        }
    }
    
    let resetTable = document.getElementById('reset-button')

    resetTable.onclick = function () {
        document.getElementById('starWars').innerHTML = "";
        console.log(starWars)
        construirTabla(starWars)
        
    }
th { 
color:#fff;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>StarWars Array </title>

    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"></head>

<header>
    <h1>Array with Objects</h1>
    <div class="input-group">
        <input type="text" class="form-control" placeholder="Ingresa tus valores" aria-label="Recipient's username with two button addons">
        <button class="btn btn-outline-success" type="button" id="save-button">Save</button>
        <button class="btn btn-outline-danger" type="button" id="reset-button">Reset</button>
        <button class="btn btn-outline-primary" type="button">Add</button>
        <button class="btn btn-outline-secondary" type="button" id="alpha-button">Sort A-Z</button>
        <button class="btn btn-outline-secondary" type="button" id="height-button">Sort Height</button>
        <button class="btn btn-outline-secondary" type="button">Sort gender</button>
        <button class="btn btn-outline-secondary" type="button">Add pet</button>
        <button class="btn btn-outline-secondary" type="button">Compare height</button>
    </div>
</header>


<body>
    <table class="table table-striped" id="tabla">
        <tr  class="bg-info">
            <th>Name</th>
            <th>Height</th>
            <th>Mass</th>
            <th>Hair Color</th>
            <th>Skin Color</th>
            <th>Eye Color</th>
            <th>Gender</th>
            <th>+Pet</th>
        </tr>
        
        <tbody id="starWars">
            
        </tbody>
    </table>
</body>

<script src="js/index.js"></script>

First, when I reset it, there is an error. "document.getElementById("starWars").reset()" is not a func. appears on the screen. There is a function to construct the table, construirTabla(). You could use it. It resets it back to the original. But first, you have to set the content of the element to nothing first because the function, will connect content to the table, not set it. So put this code when the reset button clicked:

resetTable.onclick = function () {
    document.getElementById('starWars').innerHTML = "";
    console.log(starWars)
    construirTabla(starWars)
    
}

You may also remove the console.log(starWars) if you want to.

Solution 2:[2]

You can simplify your code quite a bit. I changed the construitTabla() function to replace any .innerHTML of the table body instead of appending content to it. This function can then also be used in the callback function connected to the sort button.

let starWars = [
    {
        "name": "Luke Skywalker",
        "height": "172",
        "mass": "77",
        "hair_color": "blond",
        "skin_color": "fair",
        "eye_color": "blue",
        "gender": "male",
    },
    {
        "name": "C-3PO",
        "height": "167",
        "mass": "75",
        "hair_color": "n/a",
        "skin_color": "gold",
        "eye_color": "yellow",
        "gender": "n/a",
    },
    {
        "name": "R2-D2",
        "height": "96",
        "mass": "32",
        "hair_color": "n/a",
        "skin_color": "white, blue",
        "eye_color": "red",
        "gender": "n/a",
    },
    {
        "name": "Darth Vader",
        "height": "202",
        "mass": "136",
        "hair_color": "none",
        "skin_color": "white",
        "eye_color": "yellow",
        "gender": "male",
    },
    {
        "name": "Leia Organa",
        "height": "150",
        "mass": "49",
        "hair_color": "brown",
        "skin_color": "light",
        "eye_color": "brown",
        "gender": "female",
    },
    {
        "name": "Owen Lars",
        "height": "178",
        "mass": "120",
        "hair_color": "brown, grey",
        "skin_color": "light",
        "eye_color": "blue",
        "gender": "male",
    },
    {
        "name": "Beru Whitesun lars",
        "height": "165",
        "mass": "75",
        "hair_color": "brown",
        "skin_color": "light",
        "eye_color": "blue",
        "gender": "female",
    },
    {
        "name": "R5-D4",
        "height": "97",
        "mass": "32",
        "hair_color": "n/a",
        "skin_color": "white, red",
        "eye_color": "red",
        "gender": "n/a",
    },
    {
        "name": "Biggs Darklighter",
        "height": "183",
        "mass": "84",
        "hair_color": "black",
        "skin_color": "light",
        "eye_color": "brown",
        "gender": "male",
    },
    {
        "name": "Obi-Wan Kenobi",
        "height": "182",
        "mass": "77",
        "hair_color": "auburn, white",
        "skin_color": "fair",
        "eye_color": "blue-gray",
        "gender": "male",
    }
]
    
    //Popular tabla 
    construirTabla(starWars)

    function construirTabla(data) {
        let table = document.getElementById('starWars')
        
        table.innerHTML=data.map(r=>
          `<tr>
                            <td>${r.name}</td>
                            <td>${r.height}</td>
                            <td>${r.mass}</td>
                            <td>${r.hair_color}</td>
                            <td>${r.skin_color}</td>
                            <td>${r.eye_color}</td>
                            <td>${r.gender}</td>
           </tr>`).join("");
    }

    //Buttons
    let sortAlpha = document.getElementById('alpha-button')

    sortAlpha.onclick = function () {
      construirTabla(starWars.slice().sort((a,b)=>a.name.localeCompare(b.name)));
                
    }
    
    let resetTable = document.getElementById('reset-button')

    resetTable.onclick = function () {
        document.getElementById('starWars').innerHTML = "";
        // console.log(starWars)
        construirTabla(starWars)
        
    }
th { 
color:#fff;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>StarWars Array </title>

    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"></head>

<header>
    <h1>Array with Objects</h1>
    <div class="input-group">
        <input type="text" class="form-control" placeholder="Ingresa tus valores" aria-label="Recipient's username with two button addons">
        <button class="btn btn-outline-success" type="button" id="save-button">Save</button>
        <button class="btn btn-outline-danger" type="button" id="reset-button">Reset</button>
        <button class="btn btn-outline-primary" type="button">Add</button>
        <button class="btn btn-outline-secondary" type="button" id="alpha-button">Sort A-Z</button>
        <button class="btn btn-outline-secondary" type="button" id="height-button">Sort Height</button>
        <button class="btn btn-outline-secondary" type="button">Sort gender</button>
        <button class="btn btn-outline-secondary" type="button">Add pet</button>
        <button class="btn btn-outline-secondary" type="button">Compare height</button>
    </div>
</header>


<body>
    <table class="table table-striped" id="tabla">
        <tr  class="bg-info">
            <th>Name</th>
            <th>Height</th>
            <th>Mass</th>
            <th>Hair Color</th>
            <th>Skin Color</th>
            <th>Eye Color</th>
            <th>Gender</th>
            <th>+Pet</th>
        </tr>
        
        <tbody id="starWars">
            
        </tbody>
    </table>
</body>

<script src="js/index.js"></script>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 html_coder
Solution 2 Carsten Massmann

Related Questions