자바스크립트가 적용이 안되요.
294
작성한 질문수 2
[HTML]
<!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">
<link rel="stylesheet" href="style/style.css">
<link rel="stylesheet" href="https://use.typekit.net/frx5mqp.css">
<title>Weather</title>
</head>
<body class="sunny">
<section class="poster background sunny" style="background: linear-gradient(90deg, rgba(224, 224, 224, 0.72) -7.6%, #D9D9D9 27.12%, rgba(226, 226, 226, 0.96) 32.55%, rgba(255, 255, 255, 0.82) 49.92%, rgba(191, 191, 191, 0.62) 79.46%, rgba(223, 223, 223, 0.31) 104.34%, rgba(190, 190, 190, 0.00) 113.67%);">
<div class="sun-circle">
<div class="sunny-sun">
<svg width="528" height="519" viewBox="0 0 528 519" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M286.829 287.338L439.324 453.847M76.8288 55.338L229.324 221.847M301.967 256.151L527.749 254.527M48.4299 427.536L225.204 287.069M300.43 225.536L477.204 85.0692M256.485 292.987L260.015 518.747M1 253.527L226.784 254.864M254.485 1L256.879 226.775" stroke="#BE0505" stroke-width="5"/>
</svg>
</div>
</div>
</section>
<section class="title">
<h1>맑음</h1>
<h2>Sunny</h2>
</section>
<section class="contents">
<div>
<p class="latitude">37°33'58.87"N</p>
<p class="longitude">126°58'40.63"E</p>
</div>
<div class="calendar">
<div class="month">03</div>
<div>月</div>
<div class="day">10</div>
<div>日</div>
</div>
<div>
<p class="location">Gangnam-gu, Seoul</p>
<p class="time">14:00 03/10/2023</p>
</div>
</section>
<section class="poster forward"></section>
<script src="./js/index.js"></script>
</body>
</html>
document.querySelector(".sun-circle").onclick = function(){
document.querySelector(".sun-circle").style.background="FF0000";
};
처음에 console.log("document.querySelector(".sun-circle")"); 했을때는
sun circle div요소가 나왔는데,위에 문법을 쓰니깐 적용이 안되고, document is not defined라고
에러 문구가 뜹니다. 찾아보니 node때문에 그렇다는데..무슨말인지 잘 이해가 안되고 왜 적용이 안되는지
모르겠습니다ㅜㅜ vscode써서 작업하는데 라이브 서버로 미리보기 해도 console.log 안에 넣어
실행할때는 되는데. onclick코드 쓰면 미리보기의 console칸에 아무것도 안나와요ㅜㅜ...
node js에서 원래 실행이 안되는 거면, node를 지우고 vscode를 실행해야 하나요...?
js코드 넣고 실행하면, vscode 에서 아래와 같이 에러메세지가 뜹니다.
ReferenceError: document is not defined
at Object.<anonymous> (/Users/Downloads/코딩 연습/Example02/js/index.js:1:1)
at Module._compile (node:internal/modules/cjs/loader:1376:14)
at Module._extensions..js (node:internal/modules/cjs/loader:1435:10)
at Module.load (node:internal/modules/cjs/loader:1207:32)
at Module._load (node:internal/modules/cjs/loader:1023:12)
at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:135:12)
at node:internal/main/run_main_module:28:49
Node.js v21.1.0
[Done] exited with code=1 in 0.369 seconds답변 1
0
안녕하세요 Lili 님, 인프런 AI 인턴이에요.
저희가 확인한 결과, 제공해주신 코드를 보면 웹 브라우저에서 실행되는 JavaScript 코드입니다. 그러나, 위 코드는 Node.js에서 실행되는 코드가 아니기 때문에 document 객체를 사용할 수 없는 것입니다.
Node.js는 서버 측 JavaScript 실행을 위한 환경이며, document 객체는 브라우저에서만 사용할 수 있는 객체입니다. 따라서, 해당 코드를 실행하기 위해서는 브라우저에서 실행해야 합니다.
VSCode의 라이브 서버를 통해 미리보기를 하실 때, document.querySelector와 같이 브라우저에만 존재하는 기능은 정상적으로 동작하지 않을 수 있습니다. 이는 라이브 서버가 코드를 브라우저에서 실행하는 것이 아니라 Node.js에서 실행하는 것이기 때문입니다.
따라서, 정상적으로 JavaScript 코드를 실행하려면 해당 코드를 HTML 파일에 포함시키고, 브라우저에서 HTML 파일을 실행하셔야 합니다. 그러면 onclick 이벤트도 정상적으로 동작할 것입니다.
참고로, Node.js와 웹 브라우저에서의 JavaScript 실행 환경은 약간 차이가 있기 때문에, Node.js에서 실행할 경우에는 브라우저만의 기능을 사용할 수 없다는 점을 유의해야 합니다.
더 궁금한 사항이 있으시면 언제든지 물어보세요!
yes24 수집 md 파일 만들 때
0
20
2
map API
0
36
1
nodejs 터미널 인식
0
39
1
프리젠테이션 도구
0
73
1
로그인 필수 사이트 정보 수집시
0
155
2
0201 데이터 수집을 위한 프롬프트 컨텍스트 문서 작성과 코드 작성 실행시 도서정보링크확인
0
102
3
질문입니다
0
76
1
안녕하십니까! 질문드립니다!
0
111
2
md파일 수정만 하는게 아니라 실제 파일 수정
0
190
3
26번 영상과 23번 영상이 같습니다
0
89
1
영상에 사용한 슬라이드
0
93
2
어디서 표를 복사하나요?
0
64
2
1,2번이 강의가 같아요.
0
74
2
export
0
214
4
화면이 두번째 강의 부터 안나와요
0
144
1
nodemon ./bin/www 입력 시 오류
0
167
1
스티커 앱 문의
0
183
3
호스팅 및 도메인 관련
0
161
1
마커이미지가 깨집니다
0
145
2
nodemon설치와 express-generator 오류
0
223
1
vscode 자동완성
1
229
1
코드를 다운받을수 있나요?
0
205
1
1-I 1620 맞왜틀입니다
0
214
1
자바스크립트 함수가 실행되지 않습니다.
0
485
2