[JavaScript] 라디오 버튼 클릭시 숨겨진 div창이 나오게하기

문제점

라디오 버튼 클릭시 숨겨진 div창이 나오게끔 하고 싶다.

부끄럽지만 자랑스러운 내코드

나의 로직

* CSS단에 기본적인 속성은 display : none으로 주고, 해당 클릭 이벤트 발생시 요소.style.display = "block"을 활용한다

모범 답안과 비교했을 때 맞는 코드가 40%정도여서, 변수명, 전체 코드 싹다 수정했다. 따라서 모범답안을 먼저 보는 것을 추천한다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>

        .area{
            background-color: yellowgreen;
            display: none;
        }



    </style>
</head>
<body>
    
    <fieldset>
        <legend>검색할 항목을 선택하세요</legend>
        <input type="radio" id="title" name="search" onclick="title();">제목 
        <input type="radio" id="date" name="search" onclick="date();">날짜 
        <input type="radio" id="writer" name="search" onclick="writer();">작성자
    </fieldset>

    <hr>

    
    
    <div class="area" name="satus" id="title">
        검색할 제목을 입력하세요: <br>
        <input type="search" name=""> <button >검색</button>
    </div>

    <div class="area" name="satus">
        검색할 날짜를 입력하세요: <br>
        <input type="date" name="" id="date"> - <input type="date"><button>검색</button>
    </div>

    <div class="area" name="satus">
        검색할 작성자 아이디를 입력하세요: <br>
        <input type="search" name="" id="userId"> <button>검색</button>
    </div>


    <script>
        function title(){
            var search = document.getElementById("title");
            search.style.display = "block";
        }
    </script>


</body>
</html>

CSS

나의 코드

    <style>

        .area{
            background-color: yellowgreen;
            display: none;
        }

    </style>

css단에 display : none; 으로 기술한 것이 좋은 접근이었다.

1) 하지만 fielset을 가운데 정렬할 수 없었다.

2) 뿐만 아니라 약간 들여쓰기를 하고 싶었는데, 나의 코드에서는 딱 붙어져있는 모습이었다.

모범답안

        fieldset{
            width : 400px;
            text-align: center;
            background-color: white;
        }
        
	div.box{
            width: 500px;
            height: 50px;
            box-align:center middle;
            margin: 10px;
            padding: 10px;
            display: none;
            background-color: #ffcc00;
        }

내가 원하는 값은 1) feildset {text-align: center;} 과 2) div.box{margin:10px; padding: 10px;} 에서 얻을 수 있었다.

HTML

나의 코드

    
    <fieldset>
        <legend>검색할 항목을 선택하세요</legend>
        <input type="radio" id="title" name="search" onclick="title();">제목 
        <input type="radio" id="date" name="search" onclick="date();">날짜 
        <input type="radio" id="writer" name="search" onclick="writer();">작성자
    </fieldset>

    <hr>

    
    <div class="area" name="satus" id="title">
        검색할 제목을 입력하세요: <br>
        <input type="search" name=""> <button >검색</button>
    </div>

    <div class="area" name="satus">
        검색할 날짜를 입력하세요: <br>
        <input type="date" name="" id="date"> - <input type="date"><button>검색</button>
    </div>

    <div class="area" name="satus">
        검색할 작성자 아이디를 입력하세요: <br>
        <input type="search" name="" id="userId"> <button>검색</button>
    </div>

나의 경우 라디오 요소를 클릭시 모두 다른 함수를 호출했다. 그래서 작성해야할 코드들이 너무 많아지고, 어떻게 연결짓는지 감이 오지 않았다. 그리고 어떤 요소에 id 속성을 제시해야하는지도 불명확했다. 그래서 제목에는 id값을 div 요소에 주고, 날짜와 아이디에는에는 input요소에 id값을 줬다.

모범답안

    
    <fieldset>
        <legend>검색할 항목을 선택하세요</legend>
        <input type="radio" id="title" name="category" onclick="showDiv(this);">제목
        <input type="radio" id="date" name="category" onclick="showDiv(this);">날짜 
        <input type="radio" id="writer" name="category" onclick="showDiv(this);">작성자
    </fieldset>

    <hr>

    <div id="titleBox" class="box">
        <form method="post" action="">
            검색할 제목을 입력하세요: <br> 
            <input type="search" name="title" size="50"> &nbsp;
            <input type="submit" value="검색">
        </form>
    </div>

    <div id="dataBox" class="box">
        <form method="post" action="">
            검색할 날짜를 입력하세요: 
        <br>
        <input type="date" name="start" > 
        - <input type="date" name="end"> &nbsp; 
        <input type="submit" value="검색">
        </form>
    </div>

    <div id="writerBox" class="box">
        <form action="">
            검색할 작성자 아이디를 입력하세요: <br>
            <input type="search" name="writer"> &nbsp;
            <input type="submit" value="검색">
        </form>
    </div>

1) 라디오 버튼 클릭시 단 하나의 함수만 호출된다. (== showDiv(this)로)

1.1) 이때 라디오 버튼 중 단, 하나만 선택 될 수 있게끔 같은 name 속성을 준다.

2) div단에 id 속성을 주면된다.

2.2) 이때 기본적인 규칙은 반드시 지키자, ( form 태그 안에 기술하기, submit으로 값 전달하기, name 값주기 )

Q. onclick="showDiv(this);" 바로 이 부분이 중요한데. 왜 this로 값을 전달 했을까?

아래의 개념 참고

* 매개변수 있는 함수에 this 관련 전달하기 : 간이계산기에서도 활용 했었음

<button onclick="test5(this)">버튼1</button> => 버튼 요소 객체가 선택된다.

<button onclick="test5(this.innerHTML);">버튼2</button> => 버튼2라는 값이 출력된다

<input type="button" value="버튼3" onclick="test5(this.value);"> => 버튼 요소 객체의 값 (==버튼3)가 출력된다.

JavaScript

나의 코드

    <script>
        function title(){
            var search = document.getElementById("title");
            search.style.display = "block";
        }
    </script>

다음과 같이 기술하면 아무리 눌러도 반응이 되지 않는다. 요소.style.display ="block" 접근은 좋았는데 어떤 게 문제였을까?

모범답안

    <script>
        function showDiv(element){
            var tag = document.getElementsByClassName("box");

            for(var i=0; i<tag.length; i++){
                if(element.id+"Box" == tag[i].id)
                    tag[i].style.display = "block";
                else
                    tag[i].style.display = "none";
                
            }
        }
    </script>

바로 이 부분이 모르는 것들의 집합체이라고 할 수 있다.

전달된 버튼 요소 객체를 받아줄 매개변수로 element를 설정한다.
클래스 이름이 "box"인 요소들을 찾아 tag라는 변수에 대입한다.
*하단 사진 참조* 클래스 이름이 "box"인 div 요소 객체 (titleBox, dataBox, writerBox)들이 하나의 배열로 생성된다
이것을 반복문을 돌려서 tag의 길이만큼 (3번) 반복한다
전달받은 버튼 요소 객체의 아이디값에 중 Box라는 문자열을 붙였을 때의 값이 tag의 i번째 아이디와 동일하다면, i번째 태그 스타일을 display 속성에 접근해서 block으로 변경한다.
그렇지 않으면 none으로 변경시킨다.

Q. 제가 이해한게 맞을까요?

모범 답안 전체 코드

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        
        fieldset{
            width : 400px;
            text-align: center;
            background-color: white;
        }

        div.box{
            width: 500px;
            height: 50px;
            box-align:center middle;
            margin: 10px;
            padding: 10px;
            display: none;
            background-color: #ffcc00;
        }


    </style>
</head>
<body>
    
    <fieldset>
        <legend>검색할 항목을 선택하세요</legend>
        <input type="radio" id="title" name="category" onclick="showDiv(this);">제목
        <input type="radio" id="date" name="category" onclick="showDiv(this);">날짜 
        <input type="radio" id="writer" name="category" onclick="showDiv(this);">작성자
    </fieldset>

    <hr>

    <div id="titleBox" class="box">
        <form method="post" action="">
            검색할 제목을 입력하세요: <br> 
            <input type="search" name="title" size="50"> &nbsp;
            <input type="submit" value="검색">
        </form>
    </div>

    <div id="dataBox" class="box">
        <form method="post" action="">
            검색할 날짜를 입력하세요: 
        <br>
        <input type="date" name="start" > 
        - <input type="date" name="end"> &nbsp; 
        <input type="submit" value="검색">
        </form>
    </div>

    <div id="writerBox" class="box">
        <form action="">
            검색할 작성자 아이디를 입력하세요: <br>
            <input type="search" name="writer" > &nbsp;
            <input type="submit" value="검색">
        </form>
    </div>

    <script>
        function showDiv(element){
            var tag = document.getElementsByClassName("box");
            
            console.log(tag);

            for(var i=0; i<tag.length; i++){
                if(element.id+"Box" == tag[i].id)
                    tag[i].style.display = "block";
                else
                    tag[i].style.display = "none";
                
            }
        }
    </script>

    		


</body>
</html>

보완할 점

* fieldset을 가운데 정렬 하기 위해서는 css단에 text-align: center;를 기술하면된다.

* 서버로 넘기는 코드는 꼭 form 태그 안에 기술하자

* method 속성값 기술하기

* input 요소에 name값 잊지말고 습관적으로 기술하기 !

* 공백은  

* 값 전달하기 위해 submit으로 버튼을 생성하기

* 꼭 1:1로 대입되는 관계만 생각하지 말고 ~를 포함하거나, 아니면 요소의 클래스 이름이 ~일 경우등을 생각해보기 => 복수 선택 가능

칭찬하고 싶은 점

* css단에 display : none; 으로 기술한 것이 좋은 접근이었다.

* 포스팅하는데 거의 2시간 가까이 걸렸는데, 집요하게 물고 늘어졌다는 부분에서 칭찬하고 싶다.

728x90

저작자표시

'🚨 Error > JavaScript' 카테고리의 다른 글

[JavaScript] 사용자가 입력한 문자열을 배열에서 삭제하기 (0)	2021.04.18
[JavaScript] 사용자가 입력한 값을 배열에 차곡 차곡 담기 (0)	2021.04.18
[JavaScript] 문자열을 쪼개고, 역순으로 담기 (0)	2021.04.17
[JavaScript] 배열 \| 제시되어 있는 값인(ex. 고양이)를 입력해도 "존재하지 않습니다."라는 문구가 출력된다. (0)	2021.04.17
[JavaScript] 간이 계산기 만들기 (0)	2021.04.16

사람과 사람을 IT는 개발자

[JavaScript] 라디오 버튼 클릭시 숨겨진 div창이 나오게하기

CSS

HTML

JavaScript

'🚨 Error > JavaScript' 카테고리의 다른 글

댓글

티스토리툴바

[JavaScript] 라디오 버튼 클릭시 숨겨진 div창이 나오게하기

CSS

HTML

JavaScript

'🚨 Error > JavaScript' 카테고리의 다른 글

관련글

댓글

티스토리툴바