고래씌

[JavaScript] 함수_구매정보 검색 실습문제 본문

Front-End/JavaScript

[JavaScript] 함수_구매정보 검색 실습문제

고래씌 2023. 11. 13. 18:11

 

<!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
'Front-End/JavaScript' Related Articles more