현재 버전

addeventlistener javascript

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



수정 이력

2020-12-11 14:57:47 에 아래 제목에서 변경 됨 #2

addEventListener에 대해 여쭤봅니다.

2020-12-11 14:57:47 에 아래 내용에서 변경 됨 #1

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

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