4 글 보임 - 1 에서 4 까지 (총 4 중에서)
-
글쓴이글
-
2023년 11월 13일 18:57 #103838
Soyeon Lee참가자[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> [JS]
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때문에 그렇다는데..무슨말인지 잘 이해가 안되고 왜 적용이 안되는지 모르겠습니다ㅜㅜ2023년 11월 13일 19:07 #103843
codingapple키 마스터자바스크립트 코드를 body태그 끝나기 전에 넣어봅시다 아니면 nodejs나 nextjs에서 실행하면 원래 안됩니다 크롬으로 미리보기 띄워봅시다
2023년 11월 13일 19:29 #103846
Soyeon Lee참가자스크립트 위치를 바꿔도 안되요..ㅠㅠ vscode써서 작업하는데 라이브 서버로 미리보기 해도 console.log 안에 넣어 실행할때는 되는데. onclick코드 쓰면 미리보기의 console칸에 아무것도 안나와요ㅜㅜ... node js에서 원래 실행이 안되는 거면, node를 지우고 vscode를 실행해야 하나요...? js코드 넣고 실행하면, vscode 에서 아래와 같이 뜹니다.
ReferenceError: document is not defined at Object.<anonymous> (/Users/soyeon/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
2023년 11월 13일 20:23 #103849
codingapple키 마스터html파일 크롬으로 미리보기 띄우면 js코드도 자동으로 실행됩니다 vscode에서 js파일 실행할 필요 없습니다
-
글쓴이글
4 글 보임 - 1 에서 4 까지 (총 4 중에서)
- 답변은 로그인 후 가능합니다.