Why my onload function is not working in JavaScript?

Question

I am working on api to generate random quotes. its working fine but i want to generate a random quotes as soon as page load.

document.getElementById('load').addEventListener('onload', loadData);
document.getElementById('getQuote').addEventListener('click', loadData);

    function loadData() {
        const xhr = new XMLHttpRequest();
        xhr.open('GET', 'https://talaikis.com/api/quotes/', true);
        xhr.onload = function() {
            if (this.status === 200) {
                const data = JSON.parse(this.responseText);
                document.getElementById('quote-message').innerHTML = `<h1>${data[0].quote}</h1>`;
                document.getElementById('author').innerHTML = `<h3>${data[0].author}</h3>`;
            }
        }
        xhr.send();
    }

`addEventListener('load'` ... not onload - also, do you have an element with ID == `load`? — Jaromanda X, Apr 02 '18 at 02:51
place the `loadData` function definition above & `document.addEventListener('onload',loadData)` will do the trick — VeteranLK, Apr 02 '18 at 02:53
@VeteranLK `function` declarations in JS are hoisted (moved to the top of scope), so it's perfectly valid to use the function name before it's defined — kingdaro, Apr 02 '18 at 02:55
what sort of element is it? what that has a `load` event? i.e. when do you expect this `load` event to fire? — Jaromanda X, Apr 02 '18 at 03:00

score -1 · Accepted Answer · answered Apr 02 '18 at 03:07

-1

As per JavaScript that executes after page load

Use window.onload to launch a script on document load:

window.onload = loadData;

Your full code will then look like

window.onload = loadData;
document.getElementById('getQuote').addEventListener('click', loadData);

function loadData() {
 // [...]
}

answered Apr 02 '18 at 03:07

klugjo

19,422
8
57
75

Thanks. it worked. but i have some queries. why my addeventlistener was not working? – Amrendra Nath Apr 02 '18 at 05:48
because the `onload` event does not happen to the `id=load` element, but to the `window` element. So you would have to use `window.addEventListener('load', loadData);` (note that the syntax is `load` and not `onload`) – klugjo Apr 02 '18 at 05:50

whitespace · Answer 2 · 2018-04-02T03:08:20.243

-2

i guess your question is, why the function is not working when the page loads, try enclosing your function loadData in $(document).ready(). A function enclosed in $(document).ready()will execute when the page is done loading.

edit: correction not load, ready thanks.

edited Apr 02 '18 at 03:08

answered Apr 02 '18 at 02:57

whitespace

789
6
13

document does not have a load property you can use like that – Jaromanda X Apr 02 '18 at 03:00
correction, that requires `jquery` - which is not asked for in the question – Jaromanda X Apr 02 '18 at 03:12

Why my onload function is not working in JavaScript?

2 Answers2