구매정보/검색(220927)

구매 정보

필드에 넣을 값을 아래에 출력 단, 초기 화면은 아래와 같이 만들어야 하며 구매 수량 같은 경우 최소 10, 최대 100, 각 개수는 10씩 커지도록 하며 납품 등급은 최소 1, 최대 9로 2씩 커지게 함.

Untitled

HTML

기본적인 폼의 뼈대를 구성한다.

<body>
    <form action="">
        <fieldset>
            <legend>구매정보</legend>
            <ul>
                <li>
                    구매자 : <input type="text" id="buyer" placeholder="구매자의 이름을 입력하세요" size="30">
                </li>
                <li>
                    상품명 : <input type="text" id="pName" placeholder="구매 상품 명을 입력하세요" size="30">
                </li>
                <li>
                    가격 : <input type="number" id="price" placeholder="구매 가격을 입력하세요">
                </li>
                <li>
                    구매 수량 : <input type="number" id="num" placeholder="최소 10" size="5" min="0" max="100" step="10">
                </li>
                <li>
                    남품 등급 : <input type="range" id="rank" value="1" min="1" max="9" step="2">
                </li>
                <li>
                    기타사항 : <input type="textarea" id="memo" style="width: 200px; height: 200px; resize: none;">
                </li>
            </ul>
        </fieldset>
    </form>
    <br>
    <button onclick="test1();">입력 값 출력하기</button>
    <br> <br>
    <div id="rBox" style="border: 1px solid black; width:400px; height:300px;"></div>

</body>

JavaScript

입력값을 출력하는 기능을 수행하도록 JavaScript를 작성한다.

<body>
		<script>
        function test1() {
            let buyer = document.querySelector("#buyer").value;
            let pName = document.querySelector("#pName").value;
            let price = document.querySelector("#price").value;
            let num = document.querySelector("#num").value;
            let rank = document.querySelector("#rank").value;
            let memo = document.querySelector("#memo").value;

            let rBox = document.querySelector("#rBox");

            rBox.innerHTML = "";

            rBox.innerHTML += "구매자 명 : " + buyer + "<br>";
            rBox.innerHTML += "상품 명 : " + pName + "<br>";
            rBox.innerHTML += "가격 : " + price + "<br>";
            rBox.innerHTML += "구매 수량 : " + num + "<br>";
            rBox.innerHTML += "납품등급 : " + rank + "<br>";
            rBox.innerHTML += "기타사항 : " + memo + "<br>";

        }
    </script>
</body>

전체 코드

검색

라디오 버튼을 누르면 아래 그 버튼에 맞는 검색 창이 나오도록 함 날짜 검색 같은 경우 필드는 마우스로도 입력할 수 있는 필드를 사용해야 함 (검색을 눌렀을 때는 아무 반응도 일어나지 않음)