Question

我收到“无法将属性‘innerHTML’设置为 null

2019-11-14

55

javascript html

我收到此错误。我尝试输出 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>Document</title>
</head>
<body>
    <h1> Callback Function</h1> 

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

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

// 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;

Answer 1

您的 HTML 中有错误。尝试以下操作：

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

class 和“people”之间缺少一个 = 符号。

Answer 2

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>