나의 발자취

[JS] 함수 기능 사용, 객체 넘겨받기 본문

앱 개발/etc

[JS] 함수 기능 사용, 객체 넘겨받기

달모드 2020. 11. 12. 17:43 
<!doctype html>
<html>
<head>
    <title>WEBpage front</title>
    <meta charset="utf-8">
    <script>
        function nightDayHandler(self){
       var target = document.querySelector('body');
        if (this.value === 'night'){
            target.style.backgroundColor = 'black';
            target.style.color='white';
            this.value = 'day';

            var alist = document.querySelectorAll('a');
            var i = 0;
            while (i < alist.length){
                alist[i].style.color = 'powderblue';
                i = i + 1;
            }
        } else {
            target.style.backgroundColor = 'white';
            target.style.color='black';
            this.value = 'night';

            var alist = document.querySelectorAll('a');
            var i = 0;
            while (i < alist.length){
                alist[i].style.color = 'blue';
                i = i + 1;
            }
        }   

        }

     
    </script>


</head>



<body>

    <h1><a href="index.html" text-transform:none >WEB</a></h1>
    <input type = "button" value = "night" onclick="
    document.querySelector('body').style.backgroundColor='black';
    document.querySelector('body').style.color='white';">

    <input type = "button" value = "day" onclick="
    document.querySelector('body').style.backgroundColor='white';
    document.querySelector('body').style.color='black';">
 
    
    <input id = "night_day" type = 'button' value="night" onclick="nightDayHandler(this)">
 

    <ol>
      <li><a href="1.html" id="text-shadow">HTML</a></li>
      <li><a href="2.html">CSS</a></li>
      <li><a href="3.html">JavaScript</a></li>
    </ol>
    <!--
    <h1><a href="index.html"><font color="red">WEB</font></a></h1>
    <ol>
      <li><a href="1.html"><font color="red">HTML</font></a></li>
      <li><a href="2.html"><font color="red">CSS</font></a></li>
      <li><a href="3.html"><font color="red">JavaScript</font></a></li>
    </ol>
-->


        <p>
            <div>
                <!--
                <img src = "photo.jpeg" width = "600px"  >
                -->
                
                <iframe width="600" height="340" src="https://www.youtube.com/embed/cbuZfY2S2UQ" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
            </div>
            <h6>link for <a href = "https://opentutorials.org/course/3086" target = "_blank" title="naver website">reference</a></h1>
        
        </p>


</body>
</html>

<!doctype html>
<html>
<head>
    <title>WEBpage front</title>
    <meta charset="utf-8">
    <script>
        function LInkSetColor(color){
            var alist = document.querySelectorAll('a');
            var i = 0;
            while (i < alist.length){
                alist[i].style.color = 'color';
                i = i + 1;
            }
        }
        function BodysetColor(color){
            document.querySelector('body').style.color = color;
        }
        function BodySetBackgroundColor(color){
            document.querySelector('body').style.backgroundColor = 'color';
        }
        function nightDayHandler(self){
            var target = document.querySelector('body');
            if (self.value === 'night'){
                BodySetBackgroundColor('black');
                BodysetColor('white');
                self.value = 'day';

                LInkSetColor('powderblue');
                }
            else {
                BodySetBackgroundColor('white');
                BodysetColor('black');
                self.value = 'night';

                LInkSetColor('blue');
                }
        }   

    
     
    </script>


</head>



<body>

    <h1><a href="index.html" text-transform:none >WEB</a></h1>
    <input type = "button" value = "night" onclick="
    document.querySelector('body').style.backgroundColor='black';
    document.querySelector('body').style.color='white';">

    <input type = "button" value = "day" onclick="
    document.querySelector('body').style.backgroundColor='white';
    document.querySelector('body').style.color='black';">
 
    
    <input id = "night_day" type = 'button' value="night" onclick="nightDayHandler(this)">
 

    <ol>
      <li><a href="1.html" id="text-shadow">HTML</a></li>
      <li><a href="2.html">CSS</a></li>
      <li><a href="3.html">JavaScript</a></li>
    </ol>
    <!--
    <h1><a href="index.html"><font color="red">WEB</font></a></h1>
    <ol>
      <li><a href="1.html"><font color="red">HTML</font></a></li>
      <li><a href="2.html"><font color="red">CSS</font></a></li>
      <li><a href="3.html"><font color="red">JavaScript</font></a></li>
    </ol>
-->


        <p>
            <div>
                <!--
                <img src = "photo.jpeg" width = "600px"  >
                -->
                
                <iframe width="600" height="340" src="https://www.youtube.com/embed/cbuZfY2S2UQ" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
            </div>
            <h6>link for <a href = "https://opentutorials.org/course/3086" target = "_blank" title="naver website">reference</a></h1>
        
        </p>


</body>
</html>

'앱 개발 > etc' 카테고리의 다른 글

[fetch API]  (0) 2020.11.19
[JS] 반복문을 이용해 태그의 색상 일괄 변경  (0) 2020.11.12
[JS] 기본문법, 리팩토링: this., var target 변수설정으로 중복 제거  (0) 2020.11.12
[JS] event 속성 / document.write() 은 print()와 같음  (0) 2020.11.12
'앱 개발/etc' Related Articles more
Comments