JavaScript 배열 실습 문제 5

- 해당 라디오버튼 클릭시 내용을 입력받을 수있는 영역이 보이도록 코드를 작성하세요.

 <style type="text/css">
	fieldset {  		
		width: 400px;		
		text-align: center;
		background: #dbdbdb;
	}
	div.box {
		width: 500px;	
		height: 50px;
		box-align: center middle;		
		margin: 10px;
		padding: 10px;
		background: #ffcc00;
		display: none;
	}

  </style>

>  CSS 영역 : 버튼을 누르기 전에는 div영역이 보이지 않도록 dispaly: none;으로 설정 

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

	<hr>

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

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

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

> HTML 영역 : 라디오 버튼에 onclick속성을 추가하여 클릭했을시 발생할 함수를 아이디를 전달하면서 호출
                       클릭했을시 보여질 검색화면을 미리 작성

<script>	
		function showDiv(el){
			let tag = document.getElementsByClassName("box");
			
			for(let i=0 ; i<tag.length ; i++){
				if(el.id+"Box" == tag[i].id)
					tag[i].style.display = "block";
				else{
					tag[i].style.display = "none";}
			}

		}
  	</script>

>JavaScript영역 :  라디오 버튼을 클릭했을시 해당 박스가 보여지도록  조건문을 제시
전달받은 라디오버튼의 아이디에 문자열 "Box"를 더한것과  div영역의 id가 동일하면 박스display = "block"(보여지도록)  값을 변경 
   

검색할 항목을 선택하세요.

제목    날짜    작성자   

---

검색할 제목을 입력하세요 :
 

검색할 날짜를 선택하세요 :
-  

검색할 작성자 아이디를 입력하세요 :