고래씌
[JavaScript] 함수_구매정보 검색 실습문제 본문
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3_함수구매정보 검색</title>
<style>
.area{
width: 200px;
margin: 5px;
}
.area111{
width:400px;
height: 200px;
border: 1px solid black;
}
</style>
</head>
<body>
<h1>Practice4</h1>
<form>
<fieldset id="buy">
<legend>구매 정보</legend>
<ul>
<li>구매자 : <input type="text" placeholder="구매자의 이름을 입력하세요" class="area" id="userId"></li>
<li>상품명 : <input type="text" placeholder="구매 상품 명을 입력하세요" class="area" id="pName"></li>
<li>가격 : <input type="text" placeholder="구매 가격을 입력하세요" class="area" id="price"></li>
<li>구매 수량 : <input type="number" placeholder="최소 10," min="0" max="100" step="10" id="amount"
style="width:60px; color:gray; margin:5px;" id=""></li>
<li>납품 등급 : <input type="range" id="grade" min="1" max="9" step="2"></li>
<li>기타 사항 : <textarea cols="30" rows="5" id="etc"></textarea></li>
</ul>
</fieldset>
</form>
<br>
<button onclick="printValue();">입력 값 출력하기</button>
<br>
<br>
<div class="area111" id="area1" style="border-color: black;"></div>
<script>
amount.onkeyup = function(e){ // 구매 수량 개수가 100을 넘을 경우 다시 0으로 돌림
if(e.target.value > 100){
e.target.value = 0;
}
}
const printValue = () => {
area1.innerHTML += `구매자 명 : ${userId.value}<br>`;
area1.innerHTML += `상품명 : ${pName.value}<br>`;
area1.innerHTML += `가격 : ${price.value}<br>`;
area1.innerHTML += `구매수량 : ${amount.value}<br>`;
area1.innerHTML += `납품등급: ${grade.value}<br>`;
area1.innerHTML += `기타사항: ${etc.value}<br>`;
}
</script>
<h1>Practice5</h1>
<form>
<fieldset style="text-align: center; resize: none; width:400px;">
<legend style="margin:auto">검색할 항목을 선택하세요.</legend>
<ul style="margin:auto">
<input type="radio" name="agree" id="title">제목
<input type="radio" name="agree" id="date">날짜
<input type="radio" name="agree" id="author">작성자
</ul>
</fieldset>
</form>
<br>
<div id="titlebox" class="box" style="background-color: gray; width:400px; display:none;">
검색할 제목을 입력하세요 :<br>
<input type="text" ><button>검색</button>
</div>
<div id="datebox" class="box" style="background-color: gray; width:400px; display:none;">
검색할 날짜를 선택하세요 :<br>
<input type="date" ><input type="date" ><button>검색</button>
</div>
<div id="authorbox" class="box" style="background-color: gray; width:400px; display:none;">
검색할 작성자를 입력하세요 :<br>
<input type="text"><button>검색</button>
</div>
<script>
// 벙법1.
// 위에 input type="radio" 인 제목, 날짜, 작성자 태그 안에 onclick=setDisplay(this) 추가해야함
// function setDisplay(e){
// let tag = document.getElementsByClassName("box"); // class가 box인 모든 값이 담김
// console.log(e.id); // 검색할 항목 선택의 체크한 input의 id값
// for(let i=0; i<tag.length; i++){
// if(e.id+"box" == tag[i].id){
// console.log(tag[i].id);
// tag[i].style.display = "block";
// }else{
// tag[i].style.display = "none";
// }
// }
// }
// 방법2.
const radio = document.querySelectorAll("input[type=radio]");
const div = document.querySelectorAll("div[class=box]");
radio.forEach(function (input,index) { // 0번인덱스 제목, 1 날짜, 2작성자
input.onclick = function(){ // 해당 input을 클릭하면...
div.forEach( function(value) { // value 안에는 div태그 중 class가 box인 모든 값들이 들어감
value.style.display = 'none'; // div태그 중 class가 box인 모든 태그들 모두 화면 숨김 처리
})
div[index].style.display = 'block';
}
})
</script>
</body>
</html>
'Front-End > JavaScript' 카테고리의 다른 글
[JavaScript] 13. 정규표현식을 활용한 회원가입 폼 - 실습문제 (0) | 2023.11.14 |
---|---|
[JavaScript] 12. 정규표현식 (0) | 2023.11.14 |
[JavaScript] 11. 이벤트(addEventListener, mouseenter.. 등) (0) | 2023.11.13 |
[JavaScript] 10. window 객체 (0) | 2023.11.13 |
[JavaScript] 회원가입 - 실습문제3 (0) | 2023.11.10 |