JavaScript 오류 해결하기-4

오류문제 해결하기

function 함수 작성 중 오류 발생으로 실행이 되지 않는 문제가 발생했습니다. 오류가 발생한 원인과 원인을 어떻게 해결했는지 아래에 작성해보도록 하겠습니다.

 

    function fnRemind() {
      const book = {
        title: '바람의 딸 걸어서 지구 세바퀴 반',
        author: '한비야',
        price: 10000,
        toString: function () {
          return this.title + "<br>" + this.price + "원";
        }
      }

      book.publishDt = '2024-08-14';

      book.price = 20000;

      delete book.author;

      for (let prop in book) {
        console.log(prop + ":" + book[prop]);
      }
      console.log(book);
      document.getElementById("result1").innerHTML = book;
    }

🚨 오류

▶Uncaught

TypeError: Cannot set properties of null (setting 'innerHTML')
    at fnRemind (08_object.html:175:52)
    at HTMLButtonElement.onclick (08_object.html:179:33)

 

👀 구글번역

▶잡히지 않음

TypeError: null 속성을 설정할 수 없습니다('innerHTML' 설정).
    fnRemind에서(08_object.html:175:52)
    HTMLButtonElement.onclick(08_object.html:179:33)에서

 

❓ 원인

body 내에 div 태그를 작성하지 않았습니다.

 

✅ 해결

body 내에 div 태그를 작성 하여 오류가 해결되었습니다.

<div id="result1"></div>

 

👉 문제가 전부 해결 된 함수

구글링을 통해 대략적인 원인을 파악하고 오류를 해결하긴 하였으나 div class를 왜 정의해야하는지 자세한 이유를 알아보는 학습 시간이 필요합니다.

  <div id="result1"></div>
  <button onclick="fnRemind();">복습</button>
    function fnRemind() {
      const book = {
        title: '바람의 딸 걸어서 지구 세바퀴 반',
        author: '한비야',
        price: 10000,
        toString: function () {
          return this.title + "<br>" + this.price + "원";
        }
      }

      book.publishDt = '2024-08-14';

      book.price = 20000;

      delete book.author;

      for (let prop in book) {
        console.log(prop + ":" + book[prop]);
      }
      console.log(book);
      document.getElementById("result1").innerHTML = book;
    }