Question

我正在设置一个代码，以使用JavaScript连接到API。

第9行和第10行：

app.appendChild(logo);
app.appendChild(container);

我遇到以下错误：

第9行第1列的未处理异常 ms-appx-web：//ee3edcbd-0963-4d4b-a1e7-09cd199e440e/js/main.js 0x800a138f-JavaScript运行时错误：无法获取属性未定义或空引用的“ appendChild”。

如何成功启用代码？

const app = document.getElementById('root');

const logo = document.createElement('img');
logo.src = 'logo.png';

const container = document.createElement('div');
container.setAttribute('class', 'container');

app.appendChild(logo);
app.appendChild(container);

var request = new XMLHttpRequest();
request.open('GET', 'https://ghibliapi.herokuapp.com/films', true);
request.onload = function () {

    // Begin accessing JSON data here
    var data = JSON.parse(this.response);
    if (request.status >= 200 && request.status < 400) {
        data.forEach(movie => {
            const card = document.createElement('div');
            card.setAttribute('class', 'card');

            const h1 = document.createElement('h1');
            h1.textContent = movie.title;

            const p = document.createElement('p');
            movie.description = movie.description.substring(0, 300);
            p.textContent = `${movie.description}...`;

            container.appendChild(card);
            card.appendChild(h1);
            card.appendChild(p);
        });
    } else {
        const errorMessage = document.createElement('marquee');
        errorMessage.textContent = `Gah, it's not working!`;
        app.appendChild(errorMessage);
    }
}

request.send();

Answer 1

问题是您的DOM中不存在ID为“ root”的元素。

Answer 2

您需要在HTML文档中包含ID为root的元素。

您的代码的第一行试图在DOM中查找ID为root的元素：

const app = document.getElementById('root');

错误提示：

无法获取未定义或空引用的属性'appendChild'。

因此，您的app变量为null或未定义，这意味着方法document.getElementById找不到ID为root的任何元素。

此外，您还必须确保在加载DOM之后触发脚本，否则脚本将找不到ID为root的元素，即使该元素位于HTML文档中。

要确保是否已加载DOM，可以在正文的末尾插入script标签（不在head内），也可以在脚本周围附加其他功能：

window.onload = function() {
   // here is the place for your script
}

如何修复使用JavaScript的代码API中的错误

2 个答案: