자바스크립트

2021.02.06 / JavaScript - 배열과 반복문 활용

개발지혜 2021. 2. 6. 13:09

생활코딩 23강 - 배열과 반복문의 활용

 

반복문을 사용하면 많은 일을 손쉽게 사용할 수 있다.
주간모드에서는 a태그 색상이 blue가 되고, 야간모드에서는 powderblue가 된다.

<body>
    <h1><a href="#">WEB</a></h1>
    <input type="button" value="night" onclick="
        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 += 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 += 1;
            }
        }
    ">
    
    <ol>
        <li><a href="1.html">HTML</a></li>
        <li><a href="1.html">CSS</a></li>
        <li><a href="1.html">JavaScript</a></li>
    </ol>

</body>

 

 

참고

- www.youtube.com/watch?v=hZdBDoYHd7E&list=PLuHgQVnccGMBB348PWRN0fREzYcYgFybf&index=23