제자
105
2020-12-11 14:42:36 작성 2020-12-11 14:57:47 수정됨
4
4288

addEventListener에 대해 여쭤봅니다.(수정)




It seems that document.getElementById('overlayBtn'); is returning null because it executes before the DOM fully loads.

이게 구글링으로 찾은 답변입니다.

DOM이 완전히 로드되기 전에 실행되었다는 거 같은데 완전히 로드가 되기 전에 실행된다는게 어떤 의미인지 잘 모르겠습니다.






----------------------------------------------------

안녕하세요. 자바스크립트를 배우고 있습니다.

const todoList = [
    {text : 'English',
    complete: true},
    {text : 'Japanese',
    complete: true},
    {text : 'Workout1',
    complete: true},
    {text : 'Nomard Coding',
    complete: false},
    {text : 'Udemy',
    complete: false}
]

const todoFalse = todoList.filter(function(todo){
    return !todo.complete
})

console.log(todoFalse)
const summary = document.createElement('h2')
summary.textContent = `You have ${todoFalse.length} things on your list`
document.querySelector('body').appendChild(summary)

todoFalse.forEach(function(todo){
    const p = document.createElement('p')
    p.textContent = todo.text
    document.querySelector('body').appendChild(p)
})

document.querySelector('button').addEventListener('click'function(){
    const p = document.createElement('p')
    p.textContent = 'Watching animation'

})


위에가 코드 전문 입니다. 제가 생각하지 못했던 부분에서 문제가 발생하고 해결됬었기 때문에 전문을 다 올립니다. 


콘솔창 오류는 Uncaught TypeError: Cannot read property 'addEventListener' of null at todo.js:29

이렇게 나는데요. html 본문에 있는 <script> 의 순서에 따라 읽혀지기도 하고 읽혀지지 않기도 했던 경험이 있습니다.


제가 일차원적으로 궁금한건 뭐가 잘못됬냐는 것이고 , 궁극적으로 궁금한건 html에서 javascript로 그리고 addEventListener 의 참조 순서가 어떻게 되길래 html의 head에 있을 때와 모든 <p>의 밑에 있을 때 저 매소드가 읽히고 안읽히는지 알고 싶습니다. 


addEvenLister가 들어간 구문을 js파일의 상단에 올리면 기능을 하고 대신 다른 기능을 안하는 경우도 있던데 그것도 알고 싶습니다. 생각이 정리가 잘 되지 않아 구글링이 어렵네요. 어떤걸 정확히 모르는지 모르는 것 같습니다. 도와주세요


0
  • 댓글 4

  • 마니
    2k
    2020-12-11 15:14:56

    html 랜더링을 할때  html의 위에서 부터 아래로 순차적으로 파싱합니다

    <script>

    ...

    </script>

    <p></p>

    이렇게 있을 경우에는 script가 먼저 실행 되어서 p가 아직 안그려진 상태란거죠

    그러므로 해결하려면 script안에 

    window.onload = function() {

    ...

    }


    처럼 로드가 완료 되었을 때 script를 실행하라고 코드를 작성해야합니다.


  • 제자
    105
    2020-12-11 15:25:59

    #마니

    아.. 감사합니다.!

  • pistis
    290
    2020-12-11 20:02:15

    DOMContentLoaded와 onLoad 이벤트에 대해서도 공부해보셔요~

  • 제자
    105
    2020-12-12 14:59:32

    pistis 아 감사합니다. 12월 말은 돼야 자바스크립트 인터넷강의가 끝날거 같은데 그때 참고해서 보겠습니다.

  • 로그인을 하시면 댓글을 등록할 수 있습니다.