[javascript] Uncaught TypeError: Cannot read property of null 해결방법

Uncaught TypeError: Cannot read property of null

보기만해도 정겹고 빡치는 명령어인데, 자바스크립트 개발하다보면 자주 보이는 오류다.

자바스크립트에서 요소의 값을 읽어오는데 읽어와 지지 않은 경우에 볼 수 있는 흔한 오류인데,
왜 못읽어 들여서 이런 에러를 발생시키는지 짜증난다.

// We want to get the value of an input. 
var inputVal = document.getElementById("input").value;

이처럼 요소의 값을 읽어오도록 선언했지만 실제로 읽어 오지 못했을 경우 발생하는 오류다.

이럴 경우 어떻게 해야 값을 읽어올 수 있도록 적용할 수 있을까?

페이지의 Element의 ID가 input인 것이 있는지 없는지 부터 확인하자.
혹여나 getElementByNames 인지도 체크해보자.

ID가 지정되어 있는 것인지 아닌지도 확인하자.
태그명과 같은 이름의 ID (input)을 쓰면 해깔려서 혼동하기 쉬우니 id명은 고유한 것으로 설정하는 습관을 들이자.

이런식으로 확인하다보면 해결된다.

참조 사이트

https://idiallo.com/javascript/uncaught-typeerror-cannot-read-property-of-null

Uncaught TypeError: Cannot read property of null - JavaScript - Ibrahim Diallo