한글자 차이가 오류를 만든다.

2023. 10. 26. 21:50개발

// 버튼을 클릭을 하면
// display가 NONE이면 BLOCK
// BLCOK이면 none
export const randomBtn = document.getElementById('randomBtn');

 function display() {
    randomPost();
  document.querySelector('.randomP').Style.display === "none"
    ? document.querySelector('.randomP').Style.display = "block"
    : document.querySelector('.randomP').Style.display = "none";
}
randomBtn.addEventListener('click', display);

Uncaught TypeError: Cannot read properties of undefined (reading 'display')

주석 처리한 부분대로 로직을 구현하고, 

로직 자체에는 문제가 없다고 생각이 들어서

삼항자를 잘못 이해했나 싶어서 if 구문으로 변환도 해보고 

프로퍼티 관련 검색도 해보고 

클래스랑 아이디 지정 부분 바꾸고 querySelector를 getElementById로도 해보고 

하였지만 결국 뜨는 건 위에 오류 

혹시나DOM API 부분에 style.display 부분을 쓸수 없는 지도 찾아봤지만 

5시간 정도 고민해보고 바꿔보고 할 수 있는 건 해봤지만 문제점을 찾을 수가 없었다

// 버튼을 클릭을 하면
// display가 NONE이면 BLOCK
// BLCOK이면 none
export const randomBtn = document.getElementById('randomBtn');

 function display() {
    randomPost();
  document.querySelector('.randomP').style.display === "none"
    ? document.querySelector('.randomP').style.display = "block"
    : document.querySelector('.randomP').style.display = "none";
}
randomBtn.addEventListener('click', display);

하지만 결국 문제점을 알게 되었는데

한글자 차이가 운명을 갈랐다.

보이시는가? 

.display 앞 style의 s가 대문자S였던것이 문제였다.

 

정말 간단한 구현인데도 불구하고 한글자 차이에 

이렇게 오류가 생기고 그걸 알지 못 하면 

장고의 시간을 보내게 되는 것 같다.

 

다음 번에 이런 유사한 일이 생겼을 때는 먼저 대문자 인지 소문자인지 부터 확인해야겠다.

'개발' 카테고리의 다른 글

그룹 아티스트 팬레터3  (0) 2023.11.21
그룹 아티스트 팬레터함 2  (0) 2023.11.17
그룹 아티스트 팬레터함  (0) 2023.11.16
TodoList  (0) 2023.11.06
랜덤 포스팅 띄우기  (0) 2023.10.25