<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>라디오 버튼과 이미지 출력</title>
</head>
<script>
function drawImage() {
var found = null;
var frs = document.getElementByName("fruits");
var img = document.getElementById("image");
for (var i = 0 ; i < frs.length ; i++) {
if (frs[i].checked == true)
found = frs[i];
}
switch (found) {
case frs[0]:
img.src = frs.value;
break;
case frs[1]:
img.src = frs.value;
break;
case frs[2]:
img.src = frs.value;
break;
default:
}
}
</script>
<body onchange="drawImage()">
<h3>라디오 버튼을 클릭하면 이미지를 출력합니다.</h3>
<hr>
<form id="fruit" onchange="drawImage()">
<input type="radio" name="fruits" value="media/banana.png">바나나
<input type="radio" name="fruits" value="media/mango.png">망고
<input type="radio" name="fruits" value="media/apple.png">사과
</form>
<img id="image" src="media/banana.png" alt="error">
</body>
</html>
for문을 이용하여 그 해당 라디오 버튼을 확인하여 그 값을 switch문으로 받아들인 후 form 태그에서 img.scr를 value 이라고 하여 실행하려고 하였으나 안되네요...
