WEB/JavaScript

[JS] 버튼누르면 동작 - 전구 불끄고 키기

애플쩀 2022. 5. 27. 12:33

버튼 두개로 전구 불 키고 끄기

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h3>ex01_03 html 요소 속성변경</h3>
    <button onclick="bulb_on()">trun on</button>
    <button disabled="disabled" onclick="bulb_off()">turn off</button>
    <img src="../images/pic_bulboff.gif" alt="" id="imgbulb">
    <script>
        function bulb_on(){
            let bulb=document.getElementById("imgbulb");
            bulb.src="../images/pic_bulbon.gif";

            //TURN ON 버튼 비활성화
            // document.querySelector("button:nth-of-type(1)")
            document.querySelector("button:first-of-type").disabled=true;

            //turn off 버튼 비활성화 
            document.querySelector("button:last-of-type").disabled=false;
        }
        function bulb_off(){
            let bulb=document.getElementById("imgbulb");
            bulb.src="../images/pic_bulboff.gif";

            //TURN ON 버튼 비활성화
            // document.querySelector("button:nth-of-type(1)")
            document.querySelector("button:first-of-type").disabled=false;

            //turn off 버튼 비활성화 
            document.querySelector("button:last-of-type").disabled=true;
        }
    </script>
</body>
</html>

 

 

버튼 하나로 처리 ex01_04

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h3>하나의 버튼으로 불 끄고 켜기 </h3>
    <button onclick="bulb_on_off(this);">Turn on</button>
    <img src="../images/pic_bulboff.gif" alt="" id="imgbulb">
    <script>
        function bulb_on_off(btn){
            let bulb=document.getElementById("imgbulb");
            if (btn.innerText=="Turn on") {
               bulb.src="../images/pic_bulbon.gif";
               btn.innerText="Turn off";
            }else{
                bulb.src="../images/pic_bulboff.gif";
               btn.innerText="Turn on";
            }
        }
    </script>
</body>
</html>

 

 

스위치변수를 사용하여 전구 불 끄고 키기 

 

 <script>
        var sw=false;
        function bulb_on_off(btn){
            let bulb=document.getElementById("imgbulb");
            if (!sw) {
               bulb.src="../images/pic_bulbon.gif";
               btn.innerText="Turn off";
            }else{
                bulb.src="../images/pic_bulboff.gif";
               btn.innerText="Turn on";
            }
            sw=!sw;
        }
    </script>

 

삼항연산자

 <script>
        var sw=false;
        function bulb_on_off(btn){
            let bulb=document.getElementById("imgbulb");

            bulb.src="../images/pic_bulb"+(sw?"off":"on")+".gif";
            btn.innerText=sw?"Turn on":"Turn off";

		sw=!sw;
        }
    </script>

 

 

다시풀어보기 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
   
   
    <title>Document</title>
</head>
<body>
    <h3>ex01_03 html 요소 속성변경</h3>
    <button id="btn1" onclick="bulb_on()">trun on</button>
    <button id="btn2" onclick="bulb_off()" disabled="disabled">turn off</button>
    <img src="../images/pic_bulboff.gif" alt="" id="imgbulb">

    <script>
         var btn1=document.getElementById("btn1");
            var btn2=document.getElementById("btn2");
            var img=document.querySelector("img");
        function bulb_on(){
  
            img.src="../images/pic_bulbon.gif";
            btn1.disabled=true;
            btn2.disabled=false;
        }
        function bulb_off(){
            img.src="../images/pic_bulboff.gif";
            btn1.disabled=false;
            btn2.disabled=true;
        }

    </script>
</body>
</html>

 

저작자표시 (새창열림)