기록

*55일차 실습 본문

학원/실습

*55일차 실습

pringspring 2022. 4. 14. 19:41 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>실습문제2</title>
<style>
	#result {
		background:yellowgreen;
		border:1px solid black;
		height:200px;
	}
	#productAmount {
		width:100px;
	}
</style>
</head>
<body>
	<h2>@실습문제2</h2>
	<form method="get" action="">
		<fieldset>
			<legend>납품정보</legend>
			<ul>
				<li>
					<label for="goodirum">상품명 : </label> <input type="text" id="productName" list="goodlist" required>
					<datalist id="goodlist">
						<option value="dog1004">도그1004</option>
						<option value="catchicken">고양이치킨</option>
						<option value="milk">우유</option>
					</datalist>
				</li>
				<br>
				<li>
					<label for="productAmount">납품수량 : </label> 
					<input type="number" id="productAmount" min="10" max="100" step="10" placeholder="최소10이상">
				</li>
				<br>
				<li>
					<label for="productLevel">납품등급 : </label> 
					<input type="range" id="productLevel" min="0" max="10" step="2" onchange="showVal();" >&nbsp;<span id="pVal"></span>
				</li>
				<br>
				<li>
					<label for="message">기타사항 : </label>
					<textarea id="message" rows="5" cols="30"></textarea>
				</li>
			</ul>
		</fieldset>
		<br>
		<input type="button" value="send message" onclick="printProduct();">
		<br><br>
		<div id="result"></div>
	</form>
	<script type="text/javascript">
	function showVal(){
		const productLevelVal = document.getElementById("productLevel").value;
		document.getElementById("pVal").innerHTML = productLevelVal;
	}

	function printProduct(){
		const result = document.getElementById("result");
		
		const productNameVal = document.getElementById("productName").value;
		const productLevelVal = document.getElementById("productLevel").value;
		const productAmountVal = document.getElementById("productAmount").value;
		const messageVal = document.getElementById("message").value;

		const txt = `상품명 : ${productNameVal}
납품등급 : ${productLevelVal}
납품수량 : ${productAmountVal}
기타사항 : ${messageVal}
입력하신 내용이 맞습니까?`;
		const bool = confirm(txt);
		
		if(bool){
			result.innerHTML += "상품명 : " + productNameVal + "<br>";
			result.innerHTML += "납품등급 : " + productLevelVal + "<br>";
			result.innerHTML += "납품수량 : " + productAmountVal + "<br>";
			result.innerHTML += "기타사항 : " + messageVal + "<br>";
		}

	}
  </script>
</body>
</html>

'학원 > 실습' 카테고리의 다른 글

*57일차 실습  (0) 2022.04.18
*56일차 실습  (0) 2022.04.15
*54일차 실습  (0) 2022.04.13
*53일차 실습  (0) 2022.04.13
*52일차 실습  (0) 2022.04.11
'학원/실습' Related Articles more