<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script>
function changeImage(){
var sel = document.getElementById("sel");
var img = document.getElementById("myImg");
}
</script>
</head>
<body>
<select id="sel" onchange="changeImage()">
<option value="images/Lemon.png">레몬</option>
<option value="images/Lime.png">라임</option>
<option value="images/Strawberry.png">딸기</option>
</select>
<img id="myImg">
</body>
</html>
<!-- * select 박스를 이용해 선택한 과일의 이미지가 화면에 나타나도록 하고자 코드를 작성하였다.
이미지가 화면에 나타나도록 하나의 과일을 선택했지만 선택한 과일의 이미지가 나타나지 않았다.
화면에 이미지가 나타지 않은 원인과 조치내용을 작성하시오.
-->
이미지파일을 넣기위해 문구수정을 하였음....
---------------------------------------
</style>
<script>
function changeImage(){
var sel = document.getElementById("sel"); //select선택
var str='';// 옵션값 받을 변수
var img = document.getElementById("myImg"); //이미지 속성추가할 변수
console.log(sel.length);
for (let i=0;i<sel.length;i++){
if(sel[i].selected) { // 옵션선택시는 checked와 같은것인 select인데...해깔린다....
str=sel[i].value;
console.log(sel[i].value); //확인
img.setAttribute("src",sel[i].value);
// img.setAttribute("src",str); //속성추가는 set/ 확인은 get 다같은데......제대로 모르면 해깔림
console.log(img.getAttribute("src")); //잘들어갔틑지 확인
}
}
}
</script>
</head>
<body>
<select id="sel" onchange="changeImage()">
<option value="/img/만두그라탕.jpg">레몬</option>
<option value="/img/오감자.jpg">라임</option>
<option value="/img/치치면.jpg">딸기</option>
</select>
<img id="myImg" >
</body>
'JAVASCRIPT > 예제들' 카테고리의 다른 글
| 애니메니션 : div가 div안에서 이동 (0) | 2022.08.28 |
|---|---|
| input 빈칸시 경고창띄우기 (0) | 2022.08.28 |
| 정규표현식 2 (0) | 2022.08.25 |
| 정규 표현식 예제1 (0) | 2022.08.25 |
| 대소문자 변경예제 (0) | 2022.08.25 |