JS 실습 - 버튼으로 css style 속성 변경하기

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    
    <style type="text/css">
        .center {
            text-align: center;
        }
        .content {
            overflow: hidden;
            border: 1px solid #777;
        }
        .content,
        .content .left,
        .content .right {
            width: 50%;
            margin: 0 auto;
            box-sizing: border-box;
            padding: 5px;
        }
        .content .right,
        .content .left {
            float:left; 
        }
        .left .inner,
        .right .inner {
            border: 1px solid #777;
            height: 300px;
            
        }
        .right .inner {overflow: auto;}

        img {
            width: 100%;
            height: 100%;
        }
        
    </style>
    
</head>
<body>
    
    <header>
        <div class="center">
            <h2 id="title">dark모드</h2>
            <input type = "button" id="dark_bright" value = "dark" onclick="check(this)" >
            <!--추가-->
            <hr>
        </div>
    </header>
    
    <section>
        <div class="content">
            <div class="left">
                <div class="inner"><img src="img/KakaoTalk_20240129_141948200.jpg"></div>
            </div>
            <div class="right">
                <div class="inner">
                    <p>자바스크립트는 객체 기반의 스크립트 프로그래밍 언어이다. 이 언어는 웹 브라우저 내에서 주로 사용하며, 다른 응용 프로그램의 내장 객체에도 접근할 수 있는 기능을 가지고 있다. 또한 Node.js와 같은 런타임 환경과 같이 서버 사이드 네트워크 프로그래밍에도 사용되고 있다</p>
                    <a href="https://www.naver.com">위키백과</a>
                </div>
            </div>            
        </div>

        <script>

         function check(val){
           var target = document.querySelector('body');
            if(document.querySelector("#dark_bright").value ==="dark"){
                target.style.backgroundColor='black';
                target.style.color='white';
                document.querySelector("#title").innerHTML = 'bright모드';
                document.querySelector("#dark_bright").value = 'bright';
                console.log(document.querySelector("#dark_bright").value);
            }else {
                target.style.backgroundColor='white';
                target.style.color='black';
                document.querySelector("#title").innerHTML = 'dark모드';
                document.querySelector("#dark_bright").value ="dark";
            }
         }



        </script>
    </section>

</body>
</html>

이번실습의 에러사항은 함수 check(val) 에서 this.value 를 하면 내가 알기론 document.querySelector('#dark_bright).value 라고 알고 있는데 this 와 document로 value를 바꾸는 값이다른게 이해가안되었다. 강사님과 gpt의 도움으로 함수 안에서만 변화하였고 onclick에 함수대신 식을 직접 사용 하면 돌아 간다는 사실 까지 알았다.

함수의 리턴과 변수의 사용범위까지 꼼꼼하게 확인하여야 할 것 같다.

'JS > JS-event' 카테고리의 다른 글

BOM -인터벌예제 (0)	2024.02.05
BOM (인터벌) (0)	2024.02.05
JS 실습 - onchange , onkeyup (0)	2024.01.29
JS - Css변경 (0)	2024.01.29
JS 실습 -checked ,배열 (0)	2024.01.29