실습 - 이미지를 클릭하면은 색깔 바꾸기

JavaScript/실습

실습 - 이미지를 클릭하면은 색깔 바꾸기

yunajoe 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>