나는 단지 연습과 "재미"를 위해 ES5 JS로 앱을 만들고 있는데, 여기서 웹 사이트를 저장 localStorage한 다음 페이지에 인쇄합니다. 즉, 북마크 응용 프로그램입니다.
나는 얻고있다
TypeError : 'innerHTML'속성을 null로 설정할 수 없습니다.
다음 코드를 실행할 때 콘솔 오류 :
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>© 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) 내가 따르는 자습서에는이 코드가 거의 정확하게 있으며 거기에서 실행됩니다.
또한 fetchBookmarks()다음과 같은 기능을 실행 해 보았습니다 .
window.onload = function() {
fetchBookmarks();
function fetchBookmarks(){
...some JS code
};
}
그러나 그것은 똑같이 돌아왔다
TypeError : 'innerHTML'속성을 null로 설정할 수 없습니다.
그래서 나는 여기서 조금 길을 잃었고 이것이 왜 작동하지 않는지와 그 뒤에있는 이론 을 알아내는 데 훨씬 더 관심 이 있으므로 JS를 더 잘 이해합니다 (처음 에이 앱을 빌드하는 요점).
어떤 도움을 주시면 감사하겠습니다! 감사합니다.
문제는 다음 줄에 있습니다.
document.getElementById('#bookmarksResults')
와 함께 #사용할 때 ID를 접두사로 사용할 필요가 없습니다 document.getElementById. #메서드 호출에서를 제거 하거나 document.querySelector()동일한 방식으로 작동하지만 CSS와 유사한 선택기를 지원하여 DOM에서 요소를 선택할 수 있습니다.
document.getElementById('bookmarksResults');
// OR
document.querySelector('#bookmarksResults');
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다