我收到“无法设置null的属性'innerHTML'

时间:2019-11-14 15:21:05

标签: javascript html

我收到此错误。我正在尝试输出html文档上数组中存在的名称,但是我无法做到这一点。我尝试将脚本标签放在身体下方,但仍然无法正常工作。

$posts = [
    [
        'title' => 'First title',
        'body' => 'First body'
    ],
    [
        'title' => 'Second title',
        'body' => 'Second body'
    ],
];
<!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>Document</title>
</head>
<body>
    <h1> Callback Function</h1> 

    <ul class"people"> </ul>
<script type="text/javascript" src="callme.js">

</script>
</body>
</html>

2 个答案:

答案 0 :(得分:6)

HTML中存在错误。 试试这个:

<ul class="people"> </ul>

班级和“人”之间缺少=符号。

答案 1 :(得分:0)

html中的小错误,js标记在下面添加了正确的一个,您的列表将正确打印。

// get a reference to the 'ul'
const ul = document.querySelector('.people');

//I am trying to read the people on to the html code
const people = ['mario', 'luigi', 'ryu', 'shaun', 'chun-li'];
let html = ` `;
people.forEach(function(person){
  html += `<li style="color: purple">${person}</li>`;
});


console.log("hellow");
ul.innerHTML = 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>Document</title>
</head>
<body>
    <h1> Callback Function</h1> 

    <ul class="people"> </ul>
<script type="text/javascript" src="callme.js">

</script>
</body>
</html>