문제
필드에 넣은 값을 아래에 출력
단, 초기 화면은 아래와 같이 만드러야 하며 구매 수량 같은 경우 최소 10, 최대 100,
각 개수는 10씩 커지도록 하며
납품 등급은 최소 1, 최대 9로 2씩 커지게 함.
코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style> <!--CSS-->
fieldset{ /*fieldset 크기 지정*/
width: 500px;
}
.area { /*div class명으로 크기 지정*/
border: 1px solid black;
width: 450px;
min-height: 200px;
}
</style>
</head>
<body>
<h1>Practice5</h1>
<form action="">
<fieldset>
<legend>구매 정보</legend>
<ul> <!--순서반영이 필요없는 목록태그 이용-->
<li>구매자 : <input type="text" name="information" placeholder="구매자의 이름을 입력하세요."></li> <!--설명 placeholder 활용-->
<li>상품명 : <input type="text" name="information" placeholder="구매 상품 명을 입력하세요."></li>
<li>가격 : <input type="number" name="information" placeholder="구매 가격을 입력하세요."></li>
<li>구매 수량 : <input type="number" name="information" min="10" max="100" step="10" placeholder="최소 10."></li>
<li>납품 등급 : <input type="range" name="information" min="1" max="9" step="2" value="1"></li>
<li>기타 사항 : <textarea name="information" id=""></textarea></li>
</ul>
</fieldset>
<br>
<button type="button" onclick="info()">입력 값 출력하기</button> <!--버튼을 눌러도 값이 사라지지 않게 하기 위해 type button 추가 -->
</form>
<br>
<div class="area" id="select-result"></div>
<script>//JavaScript
function info() {
const inputs = document.getElementsByName('information'); //name으로 한번에 불러오기 -> 배열
const buyer = inputs[0].value;
const productName = inputs[1].value;
const price = inputs[2].value;
const quantity = inputs[3].value;
const grade = inputs[4].value;
const etc = inputs[5].value;
const resultDiv = document.getElementById('select-result'); //div에 넣기 위해
//받은 값 문제에 맞춰서
const resultHTML = `
구매자 명 : ${buyer}님 <br>
상품 명 : ${productName}<br>
가격 : ${price} 만원<br>
구매 수량 : ${quantity} 개<br>
납품등급 : ${grade}등급<br>
기타사항 : ${etc}`
resultDiv.innerHTML = resultHTML;
}
</script>
</body>
</html>
구현