Change create table onclick Event to Onload Page

Question

Good night friends, i have this idea, and now i'm stuck trying to changing the code to onload().

I tryied a lot of different ways, but no one worked for me.

I'll let my code down here, if you can help me i apreciate, but show me how to do it, i don't wanna you just give me the finish code.

HTML

<div>
    <button>Get</button>
    <div id="table"></div>
</div>
<script src="script.js"></script>
</body>
</html>

JS

let myTable = document.querySelector('#table');


var distribuidores;
fetch('http://localhost:3000/distribuidores')
    .then(res => res.json())
    .then(data => distribuidores = data)
    .then(() => console.log(distribuidores))

let headers = ['id', 'codBrid', 'descricao']

btnGet.addEventListener('click', () => {
    let table = document.createElement('table');
    let headerRow = document.createElement('tr');

    headers.forEach(headerText => {
        let header = document.createElement('th');
        let textNode = document.createTextNode(headerText);
        header.appendChild(textNode);
        headerRow.appendChild(header);
    });

    table.appendChild(headerRow);

    distribuidores.forEach(emp => {
        let row = document.createElement('tr');
        Object.values(emp).forEach(text => {
            let cell = document.createElement('td');
            let textNode = document.createTextNode(text);
            cell.appendChild(textNode);
            row.appendChild(cell);
        });

        table.appendChild(row);
    });

    myTable.appendChild(table);
});

json

{
       "distribuidores": [
        {
            "id": "1",
            "codint": "4613",
            "descricao": "HTMYS"
        },
        {
            "id": "2",
            "codint": "10325",
            "descricao": "MPB LTDA"
        }
    ]
}

Javascript has global event handlers for onLoad. Both document.onLoad and window.onLoad functions which would fire when the page loads. See here: https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onload See also useful post on document onload vs window onload. https://stackoverflow.com/questions/588040/window-onload-vs-document-onload — P. Brew, Jul 22 '21 at 09:26

score 0 · Answer 1 · answered Jul 22 '21 at 05:03

When I add id to the button your code works well

let myTable = document.querySelector('#table');


var distribuidores = [
        {
            "id": "1",
            "codint": "4613",
            "descricao": "HTMYS"
        },
        {
            "id": "2",
            "codint": "10325",
            "descricao": "MPB LTDA"
        }
    ];


let headers = ['id', 'codBrid', 'descricao']

btnGet.addEventListener('click', () => {
    let table = document.createElement('table');
    let headerRow = document.createElement('tr');

    headers.forEach(headerText => {
        let header = document.createElement('th');
        let textNode = document.createTextNode(headerText);
        header.appendChild(textNode);
        headerRow.appendChild(header);
    });

    table.appendChild(headerRow);

    distribuidores.forEach(emp => {
        let row = document.createElement('tr');
        Object.values(emp).forEach(text => {
            let cell = document.createElement('td');
            let textNode = document.createTextNode(text);
            cell.appendChild(textNode);
            row.appendChild(cell);
        });

        table.appendChild(row);
    });

    myTable.appendChild(table);
});

<html>
<body>
<div>
    <button id=btnGet>Get</button>
    <div id="table"></div>
</div>
</body>
</html>

Change create table onclick Event to Onload Page

1 Answers1