Question

我正在使用ES5 JS构建一个仅用于练习和“有趣”的应用程序，我将网站存储在localStorage中，然后在页面上打印出来，即书签应用程序。

我得到了

TypeError：无法设置null
的属性'innerHTML'

运行以下代码时控制台中出现

错误：

的index.html

  <body onload="fetchBookmarks()">

    <div class="container">
        ...some code
      </div>

      <div class="jumbotron">
        <h2>Bookmark Your Favorite Sites</h2>
        <form id="myForm">
            ...some code
        </form>
      </div>

      <div class="row marketing">
        <div class="col-lg-12">
            <div id="bookmarksResults"></div> /* problem code */
        </div>
      </div>

      <footer class="footer">
        <p>&copy; 2018 Bookmarker</p>
      </footer>

    </div>
    <link rel="stylesheet" href="main.css">
    <script src="./index.js"></script>
</body>

index.js

...someJScode that stores the websites in localStorage
function fetchBookmarks() {
    var bookmarks = JSON.parse(localStorage.getItem('bookmarks'));

    //Get output id
    var bookmarksResults = document.getElementById('#bookmarksResults');

    bookmarksResults.innerHTML = '';
    for(var i = 0; i < bookmarks.length; i++) {
        var name = bookmarks[i].name;
        var url = bookmarks[i].url;

        bookmarksResults.innerHTML += name;
    }

}

现在，错误显然是因为我在<body>之前加载<div id="bookmarksResults"></div>所以innerHTML以null回复

但这里有两件事：

1）当我将onload="fetchBookmarks()"分配给<footer>元素时，该函数不会运行。 2）我所遵循的tututorial几乎完全具有此代码，并且在那里运行。

我也试过像这样运行fetchBookmarks()函数：

 window.onload = function() {
            fetchBookmarks();
            function fetchBookmarks(){
                ...some JS code
            };
        }

但是返回了相同的

TypeError：无法设置null
的属性'innerHTML'

所以我有点迷失在这里，并且更有兴趣找出为什么这不起作用及其背后的理论让我更好地理解JS（构建这个app的重点）首先）。

任何帮助将不胜感激！谢谢SO团队。

Answer 1

您需要传递id的值而不使用#

从

更新

var bookmarksResults = document.getElementById('#bookmarksResults');

到

var bookmarksResults = document.getElementById('bookmarksResults');

Answer 2

问题在于这一行：

document.getElementById('#bookmarksResults')

当您与#一起使用时，您不需要使用document.getElementById为ID添加前缀。您可以从方法调用中删除#，也可以使用document.querySelector()，它的工作方式相同，但支持类似CSS的选择器从DOM中选择元素。

document.getElementById('bookmarksResults');
// OR
document.querySelector('#bookmarksResults');

窗口加载时innerHTML ='null'的变通方法

2 个答案: