728x90
반응형
실행 화면
 |
 |
 |
1. 기본
<자바스크립트 코드>
<!DOCTYPE html>
<html><head><meta charset="UTF-8">
<title>x</title>
</head>
<body onload="show()">
<h3>선택된 라디오 버튼 알아내기</h3>
<hr>
<select id="fruit" onchange="show()">
<option value="media/banana.png">바나나
<option value="media/strawberry.png">딸기
<option value="media/apple.png">사과
</select>
<img id="fruitImg" src="media/banana.png">
<script>
function show() {
var sel = document.getElementById("fruit");
var img = document.getElementById("fruitImg");
img.src = sel.options[sel.selectedIndex].value;
}
</script>
</body>
</html>
2. 응용(예제 9-14 변형)
1) 예제 9-14, selectIndex를 활용하는 점과 출력 화면이 유사한 점에서 위의 코드를 활용해 구현해보면 좋겠다고 생각.
2) 실행 화면
 |
 |
 |
3) 코드
- 기본 코드와 차이? 이미지 로딩이 완료된 후 사이즈 출력되도록 .onload = function() { } 의 함수 작성함.
<!DOCTYPE html>
<html><head><meta charset="UTF-8">
<title>x</title>
</head>
<body onload="show()">
<h3>선택된 라디오 버튼 알아내기</h3>
<hr>
<select id="fruit" onchange="show()">
<option value="media/banana.png">바나나
<option value="media/strawberry.png">딸기
<option value="media/apple.png">사과
</select>
<span id="size">이미지 크기</span><br>
<img id="fruitImg" src="media/banana.png">
<script>
function show() {
var sel = document.getElementById("fruit");
var img = document.getElementById("fruitImg");
var size = document.getElementById("size");
img.src = sel.options[sel.selectedIndex].value;
img.onload = function() {
size.innerHTML = img.width + "x" + img.height;
}
}
</script>
</body>
</html>
참고글: [예제 9-14] https://yy-eun.tistory.com/43
[명품 웹 프로그래밍] 9장 예제 9-14, onload로 이미지 크기 알아내기
실행 화면 <자바스크립트 코드> <!DOCTYPE html> x onload로 이미지 출력 사과 바나나 망고 이미지 크기 1. 복습(필) - 인덱스 selectedIndex; 를 활용해 선택 옵션 인덱스 보이기 - sel.options[index].value;..
yy-eun.tistory.com
'웹개발' 카테고리의 다른 글
| [jQuery] 처음배우는 Javascript_jQuery, 콤보 박스 선택 (0) | 2021.12.13 |
|---|---|
| [명품 웹 프로그래밍] 9장 예제 9-20, 키 이벤트 리스너 (0) | 2021.12.12 |
| [명품 웹 프로그래밍] 9장 예제 9-18, 체크박스로 선택 물품 계산 (0) | 2021.12.12 |
| [명품 웹 프로그래밍] 9장 예제 9-17, 선택된 라디오버튼 알아내기 (0) | 2021.12.12 |
| [명품 웹 프로그래밍] 9장 예제 9-15, new Image()로 이미지 로딩 (0) | 2021.12.12 |
