-
실습 - 이미지를 클릭하면은 색깔 바꾸기JavaScript/실습 2023. 1. 29. 12:27
나의 풀이
<!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> </head> <body> <div id="container"> <img src= "./images/cup-1.png"> </div> <script> let pic = document.querySelector('img') pic.onclick = function changePic(){ document.querySelector('img').src = "./images/cup-2.png" } </script> </body> </html>해설풀이
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>DOM event 객체</title> <style> #container { width:300px; margin:10px auto; } </style> </head> <body> <div id="container"> <img src="images/cup-1.png" id="cup"> </div> <script> var cup = document.querySelector("#cup"); // id = cup인 요소를 가져옴 cup.onclick = changePic; // cup을 클릭하면 changePic 함수 실행 function changePic() { cup.src = "images/cup-2.png"; } </script> </body> </html>'JavaScript > 실습' 카테고리의 다른 글
실습 - 이미지 클릭 하면은 이미지 파일의 주소 나타내기 (0) 2023.01.29 실습 - 이미지 클릭하면은, 이벤트 유형 & 위치 나타내기 (0) 2023.01.29 실습 - innerText, innerHTML 프러퍼티 (0) 2023.01.28 실습 - 클릭하고 창 닫기 (0) 2023.01.26 실습 - 책읽기 날짜 프로그램 만들기 (0) 2023.01.24