애완동물 선택하기

imjingu·2023년 8월 7일
js
0

개발공부

목록 보기
311/481
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h3># 좋아하는 애완동물을 선택해주세요</h3>
    <label><input type="radio" name="pet" value="강아지">
    <span>강아지</span></label>

    <label><input type="radio" name="pet" value="고양이">
    <span>고양이</span></label>

    <label><input type="radio" name="pet" value="햄스터">
    <span>햄스터</span></label>

    <label><input type="radio" name="pet" value="기타">
    <span>기타</span></label>
    <hr>
    <h3 id="output"></h3>
    <script>
        /*
        form 태그관련

        라디오 버튼 활용하기
        라디오 버튼은 name 속성이 동일하면 하나만 선택할 수 있음
        체크박스와 마찬가지로 checked 속성 사용
        */
       document.addEventListener('DOMContentLoaded', () => {
        //문서 객체 추출하기
        const output = document.querySelector('#output');
        const radios = document.querySelectorAll('[name=pet]'); // name=pet 인 모든 input를 들고옴

        //모든 라디오 버튼에
        radios.forEach((radio) => {
            // 이벤트 연결
            radio.addEventListener('change', (event) => {
                const current = event.currentTarget; // currentTarget - 해당 이벤트의 부모를 반환
                if (current.checked) {
                    output.textContent = `좋아하는 애완동물은 ${current.value} 이시군요!`;
                };
            });
        });
       });
    </script>
</body>
</html>

profile
imjingu
이전 포스트

form태그관련 체크박스 활용하기

다음 포스트

수강신청하기

0개의 댓글