문서 배경색을 선택하세요.



<form id="form1">
        <fieldset>
            <legend>
                문서 배경색을 선택하세요.
            </legend>
            <label>
                <input type="radio" value="white" name="rb" checked>
                흰색
            </label>
            <label>
                <input type="radio" value="yellow" name="rb">
                노랑
            </label>
            <label>
                <input type="radio" value="blue" name="rb">
                블루
            </label>
            <label>
                <input type="radio" value="black" name="rb">
                검정
            </label>
        </fieldset>
</form>
<script>
  var rb = document.getElementsByName("rb");

  for (let i=0; i<rb.length; i++) {
    rb[i].onchange = function() {
      document.body.bgColor = rb[i].value;
    }
  }
</script>
  1. name=”rb”로 정의했기 때문에 rb라는 배열 생성
  2. 제어문 안의 function에서도 사용 가능하도록 자료형은 let으로 정의
  3. for문으로 돌면서 rb[i] 버튼 값이 변화하는 순간 <body> bgColor 변경

bgColor를 속성으로 가지는 태그는 <body>, <table>, <tr>, <th>, <td> 등이 있다. 나머지는 css의 backgroundColor로 적용해야한다.

💗 개발 공부하는 블로그입니다. 틀리거나 문제될게 있다면 코멘트 부탁드립니다. 👉👈