라디오버튼 클릭시 원하는 배경색으로 바꾸기

개요

이 포스팅에서는 HTML과 JavaScript를 사용하여 라디오버튼을 클릭하면 원하는 배경색으로 바꾸는 방법에 대해 알아보겠습니다.

HTML

먼저, 라디오버튼을 만들기 위해 다음과 같은 HTML 마크업을 작성합니다.

<input type="radio" name="bgColor" value="red"> 빨간색<br>
<input type="radio" name="bgColor" value="blue"> 파란색<br>
<input type="radio" name="bgColor" value="green"> 초록색<br>
<div id="container">
  <h3>내용</h3>
  <p>이곳은 내용을 담는 공간입니다.</p>
</div>

위 마크업에서 우리는 name 속성을 통해 라디오버튼들을 하나의 그룹으로 묶어줍니다. 이 그룹에서 오직 하나의 항목만 선택될 수 있게 됩니다.

value 속성은 각 라디오버튼의 선택값을 설정합니다. 나중에 JavaScript 코드에서 이 값을 이용하여 선택한 색상을 적용할 것입니다.

그리고 색상을 적용할 div 요소를 생성하고, 컨테이너 내부에 일부 내용을 추가했습니다.

JavaScript

라디오버튼의 선택에 따라 배경색을 변경하려면 JavaScript를 사용해야 합니다. 아래의 코드를 HTML 문서의 <script> 태그나 외부 JavaScript 파일에 작성하세요.

document.addEventListener("DOMContentLoaded", function() {
  var radios = document.getElementsByName("bgColor");

  for (var i = 0; i < radios.length; i++) {
    radios[i].addEventListener("change", function() {
      var selectedColor = document.querySelector('input[name="bgColor"]:checked').value;
      var container = document.getElementById("container");
      container.style.backgroundColor = selectedColor;
    });
  }
});

DOMContentLoaded 이벤트를 사용하여 HTML 문서가 로드될 때 자바스크립트 코드를 실행합니다.

getElementsByName 함수를 사용하여 라디오버튼을 선택하고, addEventListener 함수를 사용하여 change 이벤트가 발생할 때마다 이벤트 핸들러를 실행합니다.

라디오버튼에 checked 속성이 있는지 확인하고, 선택된 색상 값을 가져옵니다.

배경색을 바꾸고자 하는 div 요소를 선택하고, style.backgroundColor 속성을 통해 선택한 색상을 적용합니다.

결론

이제 라디오버튼을 클릭하면 선택한 색상이 배경색으로 변경됩니다. 이를 통해 사용자는 라디오버튼을 통해 원하는 배경색을 쉽게 설정할 수 있게 됩니다.

yynt

라디오버튼 클릭시 원하는 배경색으로 바꾸기