Uncaught TypeError: Cannot read property 'innerHTML' of null at HTMLButtonElement

Question

谁能帮忙解决这个错误？

控制台：

Uncaught TypeError: Cannot read property 'innerHTML' of null
    at HTMLButtonElement.<anonymous> (script.js:5)

html代码：

  <!DOCTYPE html>
    <html lang='en'>
     <head>
      <title>Eventy</title>
      <meta charset="utf-8">
     </head>
     <body>
      <ul id="list">
         <li>item 0</li>
      </ul>
      <button id="addElem">Add</button>
      <script type="text/javascript" src="script.js"></script>
     </body>
    </html>

script.js:

var add = document.getElementById('addElem');
var list = document.getElementById('Lista'); 

add.addEventListener('click', function(){
list.innerHTML += '<li>item</li>'
});

var newLi = document.getElementsByTagName('li');
for (var i = 0; i < newLi.length; i++) {
newLi[i]
}

我想在单击按钮 'Add' 后获得新的 'li' 元素。感谢您的帮助！

Answer 1

好像有错别字。您只需将 var list = document.getElementById('Lista'); 重命名为 var list = document.getElementById('list'); 即可正常工作。在下面检查它（单击运行代码段）-

var add = document.getElementById('addElem');
var list = document.getElementById('list'); 

add.addEventListener('click', function(){
list.innerHTML += '<li>item</li>'
});

var newLi = document.getElementsByTagName('li');
for (var i = 0; i < newLi.length; i++) {
newLi[i]
}

 <ul id="list">
            <li>item 0</li>
        </ul>
        <button id="addElem">Add</button>

Answer 2

您在任何地方都没有 ID 为 **Lista* 的元素。

这就是为什么 JavaScript 无法访问 ID 不存在的元素，因此 innerHTML 的属性为空。

编辑：将列表的变量 getElementById 值更改为 "list"。

Answer 3

正如上面评论中 adeneo 指出的那样，当您真正想要 ID 为 list:

的元素时，您正在查询 ID 为 Lista 的元素

var add = document.getElementById('addElem');
var list = document.getElementById('list');

add.addEventListener('click', function() {
  list.innerHTML += '<li>item</li>'
});

var newLi = document.getElementsByTagName('li');
for (var i = 0; i < newLi.length; i++) {
  newLi[i]
}

<!DOCTYPE html>
<html lang='en'>

<head>
  <title>Eventy</title>
  <meta charset="utf-8">
</head>

<body>
  <ul id="list">
    <li>item 0</li>
  </ul>
  <button id="addElem">Add</button>
  <script type="text/javascript" src="script.js"></script>
</body>

</html>

Uncaught TypeError: Cannot read property 'innerHTML' of null at HTMLButtonElement

Uncaught TypeError: Cannot read property 'innerHTML' of null at HTMLButtonElement

html

javascript

dom

typeerror

getelementsbytagname