为什么我的onload函数无法在JavaScript中使用？

Question

我正在使用api来生成随机报价。 其工作正常，但我想在页面加载后立即生成随机引号。

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();
    }

Answer 1

按照页面加载后执行的JavaScript

使用window.onload在文档加载时启动脚本：

window.onload = loadData;

您的完整代码将如下所示

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

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

Answer 2

我想你的问题是，为什么页面加载时函数无法正常工作，请尝试将函数loadData封装在$(document).ready() 。 页面加载完成后，将执行$(document).ready()包含的函数。

编辑：更正未load ， ready感谢。