1. 설명
- document.querySelector(); :
id, class, tag 등으로 해당하는 객체를 찾아주는 함수이다.
- onchange :
select box 안의 값이 변할 때를 나타낸다.
- onload :
img나 body가 로드될 때를 나타낸다.
- .selectedIndex :
현재 select box에서 선택한 option을 나타내는 index를 반환해준다.
- .options[index].value :
option 테그는 따로 객체를 찾지 않아도 select 객체를 찾아서 .options[index]를 하여 가져올 수 있다.
- innerHtml :
테그 안에 텍스트 뿐만아니라 html도 가져온다. 즉 컨텐츠를 가져온다.
- innerText :
테그 안에 텍스트만 가져온다.
- 백틱 ` :
백틱 사이에 ${}사용하여 변수를 넣을 수 있다.
- 람다식으로 addEventListener 사용하기 :
-
작성순서
- .addEventListener("언제",그때 처리할 함수);
- 언제 : onload, onchange 등 on을 빼고 나머지를 적는다.
- .addEventListener("load",()=>{};);
- 함수를 구현한다.
- .addEventListener("load",()=>{
imgSize.innerHTML = `${myImg.width}*${myImg.height}`;});
2. 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>onload로 이미지 크기 출력</title>
<script>
function changeImage(){
let imgName = document.querySelector("#imgName");
let imgSize = document.querySelector("#imgSize");
let imgName2 = document.querySelector("#imgName2");
let myImg = document.querySelector("#myImg");
let index = imgName.selectedIndex;
myImg.src = imgName.options[index].value;
imgName2.innerHTML = imgName.options[index].innerHTML;
myImg.addEventListener("load",()=>{
imgSize.innerHTML = `${myImg.width}*${myImg.height}`;
});
}
</script>
</head>
<body>
<h1>onload로 이미지 크기 출력</h1>
<hr>
<form action="#" method="post">
<select name="imgName" id="imgName" onchange="changeImage()">
<option value="./images/apple.png">사과</option>
<option value="./images/banana.png">바나나</option>
<option value="./images/mango.png">망고</option>
<option value="./images/strawberry.png">딸기</option>
</select>
<span id="imgSize"></span>
<span id="imgName2"></span>
<br><br>
<img id="myImg" src="./images/apple.png" alt="이미지">
</form>
</body>
</html>
3. 결과
