JavaScript 오류 해결하기

실습문제

링크명, 링크경로가 담겨있는 배열을 통해서
연습2 버튼 클릭 시 동적으로 a 요소들을 생성해서
#practiceResult 영역에 출력하시오
단, 링크 클릭 시 새탭에 열리도록 설정

 

 

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

 

    <div class="practiceResult"></div>
    
    function fnPractice2() {
      const sites = [
        '네이버', 'https://www.naver.com',
        '구글', 'https://www.gogle.com',
        '카카오', 'https://www.kakao.com',
      ];
      
      // <a href="xxxxx" target="_blank">xxx</a>
      const resultEl = document.getElementById("practiceResult");

      for(let i=0; i<site.length; i+=2){
        resultEl.innerHTML += '<a href="' + site[i+1] + '"target="_blank">' + sites[i] + "</a><br>"
      }

    }
  </script>

🚨 오류

▶Uncaught

TypeError: Cannot read properties of null (reading 'innerHTML')
    at fnPractice2 (실습문제 풀이.html:45:9)
    at HTMLButtonElement.onclick (실습문제 풀이.html:12:36)

 

👀 구글번역

▶잡히지 않음

TypeError: null 속성을 읽을 수 없습니다('innerHTML' 읽기).
    at fnPractice2 (실습문제 풀이.html:45:9)
    at HTMLButtonElement.onclick (실습문제 풀이.html:12:36)

 

❓ 원인

오타를 작성했습니다.

getElementById("pacticeResult ");

 

✅ 해결

오타를 수정했습니다.

getElementById("practiceResult");

---

🚨 오류

▶Uncaught

실습문제풀이.html:45 Uncaught 
ReferenceError: site is not defined

 

👀 구글번역

▶잡히지 않음
실습문제풀이.html:45 Uncaught 
ReferenceError: 사이트가 정의되지 않았습니다.

 

❓ 원인

const 변수명을 "sites"로 정의한 후에 for문 내에 있는 변수명을 "s"를 뺀 오타를 작성했습니다.

 

for (let i = 0; i < site.length; i += 2) {
        resultEl.innerHTML += '<a href="' + site[i + 1] + '"target="_blank">' + site[i] + "</a><br>"

}

 

✅ 해결

오타 수정 후 정상적으로 실행했습니다.

for (let i = 0; i < sites.length; i += 2) {
        resultEl.innerHTML += '<a href="' + sites[i + 1] + '"target="_blank">' + sites[i] + "</a><br>"

}

 

---

🚨 오류

▶Uncaught

Uncaught TypeError: Cannot read properties of null (reading 'innerHTML')
    at fnPractice2 (실습문제 풀이.html:45:9)
    at HTMLButtonElement.onclick (실습문제 풀이.html:12:36)

 

👀 구글번역

▶잡히지 않음
잡히지 않은 TypeError: null 속성을 읽을 수 없습니다('innerHTML' 읽기)
    at fnPractice2 (실습문제 풀이.html:45:9)
    at HTMLButtonElement.onclick (실습문제 풀이.html:12:36)

 

❓ 원인

div 속성을 id가 아닌 class로 작성했습니다.

<div class="practiceResult"></div>

 

✅ 해결

div 속성을 class에서 id로 수정했습니다.

<div id="practiceResult"></div>

 

👉 문제가 전부 해결 된 함수

문법을 알고 변수를 정의해두었다고 해도 따옴표를 빼먹거나 오타를 발생해서 오류가 뜨는 경우가 대다수인 것 같습니다. 코드 작성 시 오타에 주의하는 습관을 들여보도록 하겠습니다. 그리고 항상 콘솔창의 오류를 확인하는 습관을 들여보도록 하겠습니다.

    <div id="practiceResult"></div>
    function fnPractice2() {
      // 하단의 링크명, 링크경로가 담겨있는 배열을 통해서
      // 연습2 버튼 클릭 시 동적으로 a 요소들을 생성해서
      // #practiceResult 영역에 출력하시오
      // 단, 링크 클릭 시 새탭에 열리도록 설정
      const sites = [
        '네이버', 'https://www.naver.com',
        '구글', 'https://www.gogle.com',
        '카카오', 'https://www.kakao.com',
      ];

      // <a href="xxxxx" target="_blank">xxx</a>
      const resultEl = document.getElementById("practiceResult");

      for (let i = 0; i < sites.length; i += 2) {
        resultEl.innerHTML += '<a href="' + sites[i + 1] + '"target="_blank">' + sites[i] + "</a><br>"
      }

    }