当我的代码运行并且应该在Ajax onload中编辑DOM元素时,它不起作用并给我一个错误:TypeError:无法将属性'innerHTML'设置为null。

我已经检查了几乎所有内容,并且我确实相信我并没有在类名或其他任何内容上弄错。

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Ajax Crash Course</title>
</head>
<body>
     <button class="userBtn">Click for User</button>

    <br>
    <br>

    <div class="DOMInsertions"></div>

    <script src="ajax2.js"></script>
</body>
</html>


JavaScript:

const userBtn = document.querySelector('.userBtn');
let listNum = 0;


userBtn.addEventListener('click', userCall);

function userCall() {

    const xhr = new XMLHttpRequest;

    xhr.open('GET', 'user.json', true);

    xhr.onload = function() {
        if( xhr.status === 200 ){
            let user = JSON.parse(this.responseText);
            let { name, id, email } = user;

            let className = `userList_${listNum}`;

            textToDOM('h1', 'User:', 'heading');

            textToDOM('ul', 'Yo', className)

            let list = document.querySelector(className)

            list.innerHTML = `
            <li>ID: ${id} </li>
            <li>Name: ${name} </li>
            <li>Email: ${email}</li>
            `
            listNum++;
        }
    }

    xhr.send();
}

最佳答案

好的,我实际上已经重建了脚本并发现了一些问题:

DOMInsert定义不正确。您可以通过在注射容器中添加一个ID并通过ID引用它来解决此问题:

<div class="DOMInsertions" id="dominsert"></div>


然后使用:

document.getElementById('dominsert').appendChild(addition);


第二个问题是您的className没有定义。结果,您的“列表”是未定义的。

关于javascript - Ajax的JS错误:TypeError:无法将属性'innerHTML'设置为null(不是重复的,没有其他答案有效),我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/57277443/

10-12 12:56
查看更多