null의 'addEventListener' 속성을 읽을 수 없습니다.
프로젝트에는 바닐라 자바스크립트를 사용해야 합니다.몇 가지 기능이 있는데, 그 중 하나는 메뉴를 여는 버튼입니다.대상 ID가 있는 페이지에서는 작동하지만 ID가 없는 페이지에서는 오류가 발생합니다.함수가 ID를 찾을 수 없는 페이지에서 "Cannot read property 'addEventListener' of null" 오류가 표시되고 다른 함수는 작동하지 않습니다.
아래는 메뉴를 여는 버튼의 코드입니다.
function swapper() {
toggleClass(document.getElementById('overlay'), 'open');
}
var el = document.getElementById('overlayBtn');
el.addEventListener('click', swapper, false);
var text = document.getElementById('overlayBtn');
text.onclick = function(){
this.innerHTML = (this.innerHTML === "Menu") ? "Close" : "Menu";
return false;
};
어떻게 하면 좋을까요?이 코드를 모두 다른 함수로 감싸거나 if/else 문을 사용하여 특정 페이지에서 ID만 검색하지만 정확히는 알 수 없습니다.
은 그냥 게 것 같아요.el리스너를 이 아닙니다.
var el = document.getElementById('overlayBtn');
if(el){
el.addEventListener('click', swapper, false);
}
것 document.getElementById('overlayBtn');nullDOM이 완전히 로드되기 전에 실행되기 때문입니다.
이 코드 줄을 아래에 넣으면
window.onload=function(){
-- put your code here
}
문제없이 실행됩니다.
예제:
window.onload=function(){
var mb = document.getElementById("b");
mb.addEventListener("click", handler);
mb.addEventListener("click", handler2);
}
function handler() {
$("p").html("<br>" + $("p").text() + "<br>You clicked me-1!<br>");
}
function handler2() {
$("p").html("<br>" + $("p").text() + "<br>You clicked me-2!<br>");
}
나도 비슷한 상황에 직면했다.이는 페이지가 로드되기 전에 스크립트가 실행되기 때문일 수 있습니다.페이지 하단에 스크립트를 배치하여 문제를 회피했습니다.
스크립트를 본문보다 먼저 로드하고 있습니다.본문마다 스크립트를 유지합니다.
같은 에러가 발생하고 있습니다만, Null Check를 실행해도 도움이 되지 않는 것 같습니다.
제가 찾은 해결책은 DOM 로드가 언제 완료되었는지 확인하기 위해 전체 문서를 이벤트 청취자 안에 제 기능을 감싸는 것이었습니다.
document.addEventListener('DOMContentLoaded', function () {
el.addEventListener('click', swapper, false);
});
HTML 클래스나 ID를 동적으로 변경하는 프레임워크(Angular)를 사용하고 있기 때문이라고 생각합니다.
본문 태그 끝에 스크립트를 넣습니다.
<html>
<body>
.........
<script src="main.js"></script>
</body>
</html>
HTML 부분보다 JS가 먼저 로드되기 때문에 해당 요소를 찾을 수 없습니다.창이 로드되면 호출되는 함수에 JS 코드 전체를 넣기만 하면 됩니다.
Javascript 코드를 html 아래에 입력할 수도 있습니다.
스크립트는 HTML의 헤드태그에 배치되어 DOM 로딩 전에 로딩되고 있을 가능성이 있습니다.여기에는 다음 두 가지 솔루션이 있습니다.
- 태그 바로 합니다.
</body>를 참조해 주세요. - , 그럼 여기에다가 더해져요.
async이치노
script async src = "script.script" > </sc
주의: Stackoverflow에서는 보안상의 이유로 스크립트태그 코드를 추가할 수 없습니다.위의 코드에 여는 괄호와 닫는 괄호를 추가합니다.
★★★★★★★★★★★★★★★★ async파일은 비동기식으로 다운로드되고 다운로드되는 즉시 실행됩니다.
나는 두 번째 옵션이 더 좋다.비동기 및 지연에 대한 자세한 내용은 여기를 참조하십시오.
이 질문에는 이미 답이 있습니다만, 이러한 간단한 조건에서는 논리 AND(&) 연산자를 사용하는 것이 좋습니다.
var el = document.getElementById('overlayBtn');
el && el.addEventListener('click', swapper, false);
내 의견으로는 더 읽기 쉽고 간결하다.
js 코드가 외부 파일인 경우 다음 방법을 사용합니다.
<script src="filename.js" defer></script>
파일인 에는 둘 중 하나를 합니다.DOMContentLoaded
위의 두 가지 방법으로 JS 코드를 실행하기 전에 DOM이 완전히 로드됩니다!
@Rob M.의 도움에 감사드립니다.코드 마지막 블록은 다음과 같습니다.
function swapper() {
toggleClass(document.getElementById('overlay'), 'open');
}
var el = document.getElementById('overlayBtn');
if (el){
el.addEventListener('click', swapper, false);
var text = document.getElementById('overlayBtn');
text.onclick = function(){
this.innerHTML = (this.innerHTML === "Menu") ? "Close" : "Menu";
return false;
};
}
저도 같은 문제가 있었는데 신분증이 나왔어요.그래서 "syslog.onload = init;"를 추가하려고 했습니다.그 후, 원래의 JS 코드를 init 함수(원하는 대로)로 감았습니다.이 방법은 성공했기 때문에 적어도 제 경우에는 문서를 로드하기 전에 이벤트 청취자를 추가하고 있었습니다.이것이 당신이 경험하고 있는 것일 수도 있습니다.
스크립트 태그에 속성 defer를 추가할 수 있습니다.이 에러가 표시되는 것은, DOM 가 로드되기 전에 스크립트가 실행되고 있기 때문입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/styles.css">
<script src="scripts/main.js" defer="defer"></script>
</head>Delfer는 DOM이 해석된 후 스크립트를 실행함을 나타내는 부울 값입니다.
같은 문제가 발생하여 null을 확인했지만 소용이 없었습니다.페이지 로드 전에 스크립트를 로드하고 있었기 때문입니다.따라서 본문 끝 태그 앞에 스크립트를 배치하는 것만으로 문제가 해결되었습니다.
가장 접근하기 쉬운 접근법은 el 앞에 물음표를 추가하는 것이라고 생각합니다.
var el = document.getElementById('overlayBtn');
el?.addEventListener('click', swapper, false);
이름과 함께 인용문을 모아놨어요업데이트 버튼을 사용하여 특정 이름과 관련된 마지막 견적을 업데이트하고 있지만 업데이트 버튼을 클릭해도 업데이트되지 않습니다.server.js 파일과 외부 js 파일(main.js)의 코드를 아래에 첨부합니다.
main.disc(js)
var update = document.getElementById('update');
if (update){
update.addEventListener('click', function () {
fetch('quotes', {
method: 'put',
headers: {'Content-Type': 'application/json'},
body: JSON.stringify({
'name': 'Muskan',
'quote': 'I find your lack of faith disturbing.'
})
})var update = document.getElementById('update');
if (update){
update.addEventListener('click', function () {
fetch('quotes', {
method: 'put',
headers: {'Content-Type': 'application/json'},
body: JSON.stringify({
'name': 'Muskan',
'quote': 'I find your lack of faith disturbing.'
})
})
.then(res =>{
if(res.ok) return res.json()
})
.then(data =>{
console.log(data);
window.location.reload(true);
})
})
}
server.disc 파일
app.put('/quotes', (req, res) => {
db.collection('quotations').findOneAndUpdate({name: 'Vikas'},{
$set:{
name: req.body.name,
quote: req.body.quote
}
},{
sort: {_id: -1},
upsert: true
},(err, result) =>{
if (err) return res.send(err);
res.send(result);
})
})
스크립트 태그에 'async'만 추가하면 문제가 해결된 것 같습니다.누가 설명해 줄 수 있을지 모르겠지만, 나한테는 효과가 있었어페이지가 스크립트가 로드되기를 기다리지 않기 때문에 페이지가 JavaScript와 동시에 로드되는 것 같습니다.
Async/Awit를 사용하면 동기식으로 비동기 코드를 작성할 수 있습니다.그것은 단지 생성기를 사용하는 통사적인 설탕과 "변수" 실행에 대한 항복 문장으로, 우리가 그것을 변수에 할당할 수 있는 능력을 준다.
여기 레퍼런스 링크 - https://medium.com/siliconwat/how-javascript-async-await-works-3cab4b7d21da
다른 사람들이 말했듯이 스크립트는 페이지(특히 타깃 요소)가 로드되기 전에 실행된다는 것이 문제입니다.
하지만 저는 내용을 재정렬하는 솔루션이 마음에 들지 않습니다.
권장되는 솔루션은 페이지 온로드이벤트에 이벤트 핸들러를 배치하고 Listener를 설정하는 것입니다.그러면 할당이 실행되기 전에 페이지와 대상 요소가 로드됩니다.예
<script>
function onLoadFunct(){
// set Listener here, also using suggested test for null
}
....
</script>
<body onload="onLoadFunct()" ....>
.....
최근에 이 문제가 발생했는데 getElementById와 querySelector에서 잘못된 클래스 이름을 제공하고 있는 것을 발견했습니다.그래서 당신의 스크립트와 html 파일에서 당신의 클래스와 아이디 이름을 크로스 체크하는 것도 제안할 것입니다.
클래스인 Id로 요소를 얻으려다 이 문제에 직면하게 되었습니다.id 나 class 등 올바른 Atribute로 요소를 취득하고 있는지 확인합니다.그렇지 않으면 이 오류가 발생합니다.
이 에러는, 「요소가 DOM 에 존재하지 않는 경우」나, 이 에러가 발생하는 경우에서도 발생합니다.id또는classname는 존재하지 않지만 스크립트파일에 요구되고 있습니다.따라서 늘로 이벤트를 호출하고 있습니다.
왜냐하면, 사람들은 그들의 정의를 내리는 습관을 가지고 있기 때문이다.javascript줄서다headhtml 태그로 무언가를 할 때 javscript 파일보다executedhtml 파일보다 우선하기 때문에 반환되는 값은 다음과 같습니다.NULL.
솔루션: Define your Javascript file at the end of your 바디태그;
나는 가장 쉬운 접근법이 지연을 사용하는 것이라고 생각한다.왜 아무도 이 답을 올리지 않았는지 모르겠네요
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="style.js" defer></script>
</head>
이는 번들 js가 실행될 때 요소가 로드되지 않았기 때문입니다.
내가 움직이면<script src="sample.js" type="text/javascript"></script>맨 밑바닥까지index.html이렇게 하면 모든 html 요소가 해석되고 렌더링된 후에 스크립트가 실행되도록 할 수 있습니다.
창이 로드되면 모든 이벤트청취자를 추가합니다.스크립트 태그를 어디에 붙여도 마법처럼 작동합니다.
window.addEventListener("load", startup);
function startup() {
document.getElementById("el").addEventListener("click", myFunc);
document.getElementById("el2").addEventListener("input", myFunc);
}
myFunc(){}
언급URL : https://stackoverflow.com/questions/26107125/cannot-read-property-addeventlistener-of-null
'programing' 카테고리의 다른 글
| Java에서 파일이 변경된 수신기 (0) | 2022.10.20 |
|---|---|
| 동적 키 이름으로 reactjs setState()? (0) | 2022.10.20 |
| __main__py가 뭐죠? (0) | 2022.10.10 |
| JSON과 JSONP의 차이점은 무엇입니까? (0) | 2022.10.10 |
| INSERT INTO SELECT는 매우 느리지만 INSERT 또는 SELECT는 여러 번 실행할 때 빠릅니다. (0) | 2022.10.10 |