영상
개념
<!DOCTYPE html>
<html lang="ko">
<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>
<style>
.sub {
width: 60px;
height: 60px;
cursor: pointer;
}
</style>
</head>
<body>
<h1 id="heading">간식 종류</h1>
<table border="1">
<tr>
<td rowspan="5">
<img src="images/snack1.jpg" id="main" width="200px" height="200px">
</td>
<td>상품명 : 삼립 미니꿀약과</td>
</tr>
<tr>
<td>판매가 : 20,000원</td>
</tr>
<tr>
<td>배송비 : 3,000원</td>
</tr>
<tr>
<td>
수량 : <input type="number" value="1" min="1" max="5">
</td>
</tr>
<tr>
<td><button>장바구니 담기</button></td>
</tr>
<tr>
<td colspan="2">
<img src="images/snack1.jpg" class="sub" >
<img src="images/snack2.jpg" class="sub">
<img src="images/snack3.jpg" class="sub">
</td>
</tr>
</table>
<script>
// 메인 상품 이미지 가져오기
let mainImg = document.querySelector("#main");
// 작은 상품 이미지 가져오기
let subImgs = document.querySelectorAll(".sub");
// 이벤트 적용하기
for(let i=0; i<subImgs.length; i++) {
subImgs[i].addEventListener("click", changeImg);
}
function changeImg() {
let clickImg = this.src;
console.log(this);
// 아래 두 줄의 코드는 동일한 기능이다.
mainImg.src = clickImg;
// mainImg.setAttribute("src", clickImg);
}
</script>
</body>
</html>
Java
복사
<!DOCTYPE html>
<html lang="ko">
<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>
<h3 class="hello" onclick="helloMsg(this)">안녕1</h3>
<h3 class="hello" onclick="helloMsg(this)">안녕2</h3>
<hr>
<h3 class="bye">잘가1</h3>
<h3 class="bye">잘가2</h3>
<script>
function helloMsg(element) {
alert(element.innerText);
}
let list = document.querySelectorAll(".bye");
for(let i=0; list.length; i++) {
list[i].addEventListener("click", byeMsg);
}
function byeMsg() {
alert(this.innerText);
}
</script>
</body>
</html>
JavaScript
복사