잡동사니에도 사랑을

[21.09.14] practice01(JavaScript) 본문

JAVA_EE/JavaScript

[21.09.14] practice01(JavaScript)

luvforjunk 2021. 9. 16. 00:21
728x90
반응형

실행 결과창

 

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

<script type="text/javascript">

        window.onload = function() {// 처음 실행하자마자 뜰 수 있도록 window.onload를 써준다

               var kakao = document.getElementsByName("kakao") // 카카오라는 Name속성을 가진 요소'들'

               alert(kakao.length[0]);

               for(var i=0; i<kakao.length; i++){

                       // 체크된 것을 찾는다

                       if(kakao[i].checked){// 체크 되어 있으면 true 아니면 false

                              printImage(kakao[i].value);

                              break;

                       }

               }//for

              

               if(i==kakao.length) // 선택된 값이 하나도 없을 때

                       printImage("image/2.PNG"); // 기본적으로 2.PNG가 나타남

        }

       

        function printImage(imgFile){

               // alert(imgFile);

              

               document.getElementById("show").src = imgFile;

        }

</script>

</head>

<body>

        <h3>라디오 버튼을 클릭하면 이미지를 출력합니다.</h3>

        <hr>

        <form>

               <input type="radio" name="kakao" value="image/1.PNG" onclick="printImage(this.value)">달려

               <input type="radio" name="kakao" value="image/2.PNG" onclick="printImage(this.value)">요정

               <input type="radio" name="kakao" value="image/3.PNG" onclick="printImage(this.value)">바다

        </form>

        <br>

        <img id="show" src="" width="450" height="150" alt="선택한 이미지">

</body>

</html>

 

728x90
반응형

'JAVA_EE > JavaScript' 카테고리의 다른 글

[JavaScript] calc함수(덧셈, 뺄셈)  (0) 2021.09.16
[JavaScript] 옵션 선택 후 새 창을 열어 사이트에 접속하는 방법  (0) 2021.09.16
[21.09.14] exam26(JavaScript)  (0) 2021.09.14
[21.09.14] exam25(JavaScript)  (0) 2021.09.14
[21.09.14] exam24(JavaScript)  (0) 2021.09.14
'JAVA_EE/JavaScript' Related Articles more