Cannot read properties of null (reading 'classList')

유효성 검사를 진행하는데 계속 첫 새로고침후에 바로 추가하기를 누르면 'Cannot read properties of null (reading 'classList')' 이라는 오류가 계속 뜨는 것이다.. 

문제의 코드는 ↓↓

    const warning = document.querySelector('.warning')
    const warning2 = document.querySelector('.warning2')

const addListBtnEvent = (event) => {
    event.preventDefault()

    if ((title === '' || content === '') && (title.length > 15 || content.length > 100)) {
      warning2.classList.add('colorChange')
      warning.classList.add('colorChange')

    } else if (title.length > 15 || content.length > 100) {
      warning.classList.remove('colorChange')
      warning2.classList.add('colorChange')

    } else if (title === '' || content === '') {
      warning2.classList.remove('colorChange')
      warning.classList.add('colorChange')
    } else {
      const newlist = {
        id: todo.length + 1,
        title: title,
        content,
        isDone: false
      };
      setTodo([...todo, newlist])
      setTitle('')
      setContent('')
      warning.classList.remove('colorChange')
      warning2.classList.remove('colorChange')
    }

  };

이렇게 였는데 Cannot read properties of null (reading 'classList') 이런 오류가 뜨는 이유는 해당하는 클래스가 없어서 오류가 뜨는 거라고 한다. 

왜...? 전역에 선언했는데 왜 안될까 라고 생각했는데

우선 function App(){} 사이에 있었으니 전역스코프에 있던 것도 아니고 click이벤트 안에 있는 것도 아니여서제대로 읽혀지지 않았던 것이다. => 자세한 건 더 물어봐야겟다. 얼추 알겟긴 한데..

 

선언을 했고 class를 가져왔는데도 읽히지 않는다면 위치 문제가 아닌지 생각해보기

const addListBtnEvent = (event) => {
    event.preventDefault()

    const warning = document.querySelector('.warning')
    const warning2 = document.querySelector('.warning2')

    if ((title === '' || content === '') && (title.length > 15 || content.length > 100)) {
      warning2.classList.add('colorChange')
      warning.classList.add('colorChange')

    } else if (title.length > 15 || content.length > 100) {
      warning.classList.remove('colorChange')
      warning2.classList.add('colorChange')

    } else if (title === '' || content === '') {
      warning2.classList.remove('colorChange')
      warning.classList.add('colorChange')
    } else {
      const newlist = {
        id: todo.length + 1,
        title: title,
        content,
        isDone: false
      };
      setTodo([...todo, newlist])
      setTitle('')
      setContent('')
      warning.classList.remove('colorChange')
      warning2.classList.remove('colorChange')
    }

  };