[구디아카데미] 자바스크립트 반복문

✅ 반복문

• 기본 for문, 기본 while, do~while, for in문(객체 전용), for of문(배열)

    </script>
    <h3>반복문으로 각 Element에 접근하여 수정하기</h3>
    <div id="hcontainer">
        <h1>h1 1</h1>
        <h1>h1 2</h1>
        <h1>h1 3</h1>
        <h1>h1 4</h1>
        <h1>h1 5</h1>
        <button onclick="changeH();">h태그 변경하기</button>
    </div>
    <div id="checkTest">
        <button onclick="selectAll()">전체체크하기</button>

        <button onclick="checkList();">체크된 것 확인</button>
        <input type="checkbox" name="lang" value="html">
        <input type="checkbox" name="lang" value="css">
        <input type="checkbox" name="lang" value="javascrpit">
        <input type="checkbox" name="lang" value="jquery">
        <input type="checkbox" name="lang" value="servlet/jsp">
        <div id="checkResult"></div>
    </div>

    <script>
            function selectAll(){
                const checkboxs=document.getElementsByName("lang");  // 복수개임
     
                for(let i =0; i<checkboxs.length; i++){ 
                    // if(checkboxs[i].checked == false){
                    //     checkboxs[i].checked = true;
                    // }else{
                    //     checkboxs[i].checked = false;
                    // }
                    checkboxs[i].checked = checkboxs[i].checked ? false: true;
                                 // 체크박스가 체크되어있는것은 체크 안된 생태로 변경
                                 // 체크되어있는 상태는 체크된 상태로 변경
                }

                // checkboxs.forEach(function(e){ // for(let i =0; i<checkboxs.length; i++){ console.log(checkboxs[i])}
                //     console.log(e);
                // });

            }


            function checkList(){
                    const checkboxs=document.getElementsByName("lang");
                    console.log(checkboxs);
                    document.getElementById("checkResult").innerHTML="";
                    for(let i =0; i<checkboxs.length; i++){
                        if(checkboxs[i].checked)document.getElementById("checkResult")
                        .innerHTML += checkboxs[i].value;
                    }
            }

            function changeH(){
                const hs = document.querySelectorAll("#hcontainer>h1");
                console.log(hs);
                for(let i = 0; i<hs.length; i++){
                    if(i%2==0){
                        hs[i].style.backgroundColor = "magenta";
                    }else{
                        hs[i].style.backgroundColor = "lime";
                    }

                }
            }
    </script>