-
실습 - 이미지 클릭 하면은 이미지 파일의 주소 나타내기JavaScript/실습 2023. 1. 29. 13:51
나의풀이
<!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" id="cup-1"> </div> <script> let cup = document.querySelector('#cup-1') cup.onclick = function(){ alert(this.src); } </script> </body> </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"> <title>Document</title> </head> <body> <div id="container"> <img src="./images/cup-1.png" id="cup"> </div> <script> var cup = document.getElementById('cup'); cup.onclick = function(event){ alert('클릭한 이미지 파일' + this.src) } </script> </body> </html>
'JavaScript > 실습' 카테고리의 다른 글
입문 - 연속된 수의 합 (0) 2023.01.31 실습 - 마우스를 over, out 했을 때 이미지 바꾸기 (0) 2023.01.29 실습 - 이미지 클릭하면은, 이벤트 유형 & 위치 나타내기 (0) 2023.01.29 실습 - 이미지를 클릭하면은 색깔 바꾸기 (0) 2023.01.29 실습 - innerText, innerHTML 프러퍼티 (0) 2023.01.28