Error) Cannot read properties of null 해결 (getElementById VS querySelector 차이)

오늘은 JS와 HTML을 이용해 로그인 및 OpenAPI를 활용한 영화 출력 화면을 만들어 보는중 로그인 버튼이 정상작동하는지 확인할려고 버튼에 console을 활용해 정상작동 유무를 확인중 밑과 같은 에러가 출력되었다.
물론 버튼 또한 정상 작동하지 않았다.

Cannot read properties of null(setting 'onclick)

검색과 전문MDN등 많은 검색 끝에 위 에러는 흔히 나타나는 에러로 주로 HTML에서 DOM이 형성되지 않았으나 JS를 이용해 이벤트를 줄경우 또는 크롬에서 정의되지 않은 객체의 property를 읽어내거나 method를 호출했을 때 발생합니다

이를 위한 해결법으로는 HTML에 JS를 넣는 "script"태그를 body의 가장 밑부분으로 내리는 방법이 있다.

<html>
  <head>
    ...
      <h2>응답</h2>
      <div id="response_area"></div>
    </div>

    <script type='text/javascript' src="./App.js"></script>
  </body>
</html>

하지만

이번에 위 처럼 코드를 수정하였지만 정상적으로 실행을 안하였다.

let Id_text = document.querySelector(".Id-text").value //아이디 입력
let PW_text = document.querySelector(".PW-text").value //비밀번호 입력
let response_area = document.querySelector(".response_area") // 응답창
let elJoinMember = document.getElementById('#Put_login')/로그인 버튼 가져오기 

elJoinMember.addEventListener('click',()=>post(Id_text,PW_text))

//서버로 보내주는 함수 
function post(ID,PW){
  let Identy = [ID,PW]
  console.log('test')
}

js 파일을 확인하여도 정상적으로 버튼이 작동하지 않고

위 와 같은 에러가 출력되었다.

MDN에도 위와같이 사용되어 더욱 해결에 곤혹을 겪었다.

MDN예시)

buttonElement.addEventListener('click', function (event) {
  alert('누름!');
});

따라서 나온 결론은
1. Button자체에 함수가 들어가지 않았다.(document로 버튼을 아이디명으로 불러오지 못했다.)
2. html에서 type설정이 안되어 제대로 작동 되지 않았다.
라는 결과를 도출하여 해결방법을 확인하였다.
3. html이 javascrip를 제대로 불러오지 않았다.(위 방법은 확인 완료, HTML body 하단부에 JS를 호출하면 DOM이 다 형성 된 뒤 JS를 실행하는 것을 확인 하였다.)

'type= text/javascript' 입력

먼저 두번째 방법은 확인결과 애초에 'script'로 html에 기입하여 파일을 넣어주면 기본값으로 javascript가 설정되어 있는 것을 확인했다.
HTML5에서는

script 엘리먼트의 type 디폴트가 text/javascript로 지정이 되기 때문에 선언을 해줄 필요가 없으며, 동일한 문장이라고 봐도 무방하다.
유사하게 css도 지정이 되기 때문에 type="text/css" 를 지정해줄 필요가 없다.

실제로 입력하여도 해결 되지는 않았다.

마지막 방법으로 버튼 호출명을 수정해보았다.

해결

최종적으로 해결 되었다. 매우 간단한 방법을 너무 많은 시도 끝에 깨달아 버렸다.

실수는 getElementByIdq 부분에 아이디 호출로 "#"을 붙인게 문제였다.

getElementById와 querySelector는 엘리먼트를 지정한다는 측면에서 차이가 없는 것인데 따로 만들어 사용하는 이유는 뭘까?

getElementById VS querySelector 차이

Document.querySelector()는 제공한 선택자 또는 선택자 뭉치와 일치하는 문서 내 첫 번째 Element를 반환합니다. 일치하는 요소가 없으면 null을 반환합니다.(MDN)
Document.getElementById() 메서드는 주어진 문자열과 일치하는 id 속성을 가진 요소를 찾고, 이를 나타내는 Element 객체를 반환합니다. ID는 문서 내에서 유일해야 하기 때문에 특정 요소를 빠르게 찾을 때 유용합니다.(MDN)

<form id="screen">
  <input id="login" type="text" value="ID" /> //1번
  <input class="login" type="text" value="ID"/> //2번
</form>

var username1 = document.getElementById("login");//1번 

var username2 = document.querySelector("#screen #login");//1번

var username2 = document.querySelector("#screen .login");//2번

위 3개의 username 1,2,3이 불러오는 엘리먼트는 주석과 같다.
ID로 지정된 엘리먼트를 호출 할때는 getElementById가 유리하지만 class와 다양한 엘리먼트를 지목해서 불러오려면 quertSelector이 유리할것으로 보인다.

결론.

이번에

이라는 에러도 단지 엘리먼트를 제대로 호출을 하지않아 null값을 출력하고 위와 같은 값을 호출한것으로 보인다. (이제보니 null이라는 글자가 커보인다.)
에러를 접했을때 전체적인 코드 흐름을 볼것이 아닌 세부적인 부분도 관찰하여 제대로된 코드를 짜야 할것으로 보인다.
무엇이든 기본틀을 제대로 잡자!!

Author And Source

이 문제에 관하여(Error) Cannot read properties of null 해결 (getElementById VS querySelector 차이)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@baek1008/Error-Cannot-read-properties-of-null-해결

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

Error) Cannot read properties of null 해결 (getElementById VS querySelector 차이)

하지만

'type= text/javascript' 입력

해결

getElementById와 querySelector는 엘리먼트를 지정한다는 측면에서 차이가 없는 것인데 따로 만들어 사용하는 이유는 뭘까?

getElementById VS querySelector 차이

결론.

Author And Source

좋은 웹페이지 즐겨찾기