<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script defer src="/2023-11-06/이벤트활용2/solution.js"></script>
<style>
#result {
width: 500px;
height: 300px;
margin: 30px auto;
border: 2px solid red;
border-radius: 15px;
}
</style>
</head>
<body>
<div class="box">Box!</div>
<img src="/2023-09-27/img/강아지.jpg" id="img" />
</body>
</html>
js
const boxEl = document.querySelector(".box");
console.log(boxEl);
boxEl.addEventListener("click", function () {
console.log("click");
});
let imgMsg = document.querySelector("#img");
imgMsg.onclick = function () {
alert("이미지를 클릭했습니다.");
};
이미지 클릭시 이렇게 뜬다.
let imgMsg = document.querySelector("#img");
// imgMsg.onclick = function () {
// alert("이미지를 클릭했습니다.");
// };
imgMsg.addEventListener("click", function () {
alert("이미지를 클릭했습니다");
});
이렇게도 된다.
imgMsg.addEventListener("click", function () {
imgMsg.src = "/2023-09-27/img/그림2.png";
});
이렇게하면 이미있는 이미지를 클릭후에 저렇게 바뀐다
전체적인 CSS
const boxEl = document.querySelector(".box");
console.log(boxEl);
boxEl.addEventListener("click", function () {
console.log("click");
});
let imgMsg = document.querySelector("#img");
// imgMsg.onclick = function () {
// alert("이미지를 클릭했습니다.");
// };
imgMsg.addEventListener("click", function () {
alert("이미지를 클릭했습니다");
});
imgMsg.addEventListener("click", function () {
imgMsg.src = "/2023-09-27/img/그림2.png";
});
'프론트엔드 > JavaScript' 카테고리의 다른 글
| 11/15 클론코딩 시작전 기초 연습 (0) | 2023.11.15 |
|---|---|
| 자바스크립트 객체 관련 활용한 날 (마지막 수업! 공부화이팅) (0) | 2023.11.13 |
| 이벤트(events), DOM(script 위치, defer속성이용), 콜백함수(addEventListener) (0) | 2023.11.06 |
| a부터 b까지 값을 구해보기 (0) | 2023.11.06 |
| 매개변수, 인수, 익명함수, 기명함수, 자기호출함수, 화살표함수 (0) | 2023.11.06 |