Home > Mobile >  Reset button in JS is not working on HTML
Reset button in JS is not working on HTML

Time：04-07

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 >
        <input type="text"  placeholder="Ingresa tus valores" aria-label="Recipient's username with two button addons">
        <button  type="button" id="save-button">Save</button>
        <button  type="button" id="reset-button">Reset</button>
        <button  type="button">Add</button>
        <button  type="button" id="alpha-button">Sort A-Z</button>
        <button  type="button" id="height-button">Sort Height</button>
        <button  type="button">Sort gender</button>
        <button  type="button">Add pet</button>
        <button  type="button">Compare height</button>
    </div>
</header>


<body>
    <table  id="tabla">
        <tr  >
            <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>

CodePudding user response：

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 >
        <input type="text"  placeholder="Ingresa tus valores" aria-label="Recipient's username with two button addons">
        <button  type="button" id="save-button">Save</button>
        <button  type="button" id="reset-button">Reset</button>
        <button  type="button">Add</button>
        <button  type="button" id="alpha-button">Sort A-Z</button>
        <button  type="button" id="height-button">Sort Height</button>
        <button  type="button">Sort gender</button>
        <button  type="button">Add pet</button>
        <button  type="button">Compare height</button>
    </div>
</header>


<body>
    <table  id="tabla">
        <tr  >
            <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.

CodePudding user response：

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 >
        <input type="text"  placeholder="Ingresa tus valores" aria-label="Recipient's username with two button addons">
        <button  type="button" id="save-button">Save</button>
        <button  type="button" id="reset-button">Reset</button>
        <button  type="button">Add</button>
        <button  type="button" id="alpha-button">Sort A-Z</button>
        <button  type="button" id="height-button">Sort Height</button>
        <button  type="button">Sort gender</button>
        <button  type="button">Add pet</button>
        <button  type="button">Compare height</button>
    </div>
</header>


<body>
    <table  id="tabla">
        <tr  >
            <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>

Page link：https//www.codepudding.com/Mobile/363394.html

Prev:Property 'target' does not exist on type error using {...props}
Next:What is the practical usages of MessagePorts in electron Js?
  • Related

About Us:  Contact Us      Terms of Service       Privacy Policy

Copyright © 2010-2023，Powered By CodePudding