반응형
책 구매
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h2>책 구매</h2>
<div id="container">
<form>
<ul>
<li>
<label><input type="checkbox" value="s_3">자바 기초</label>
<input id="java" type="number" min="0" max="5" value=0> 개 (최대 5개)
</li>
<li>
<label><input type="checkbox" value="s_3">자바 심화</label>
<input id="javaPlus" type="number" min="0" max="3" value=0> 개 (최대 3개)
</li>
<li>
<label><input type="checkbox" value="s_3">DB 기초</label>
<input id="db" type="number" min="0" max="5" value=0> 개 (최대 5개)
</li>
<li>
<label><input type="checkbox" value="s_3">HTML/CSS</label>
<input id="html" type="number" min="0" max="3" value=0> 개 (최대 3개)
</li>
</ul>
<div>
<input type = "button" id="orderBtn" value="주문하기">
</div>
</form>
</div>
</body>
</html>
<script>
var tag= document.querySelector('#orderBtn');
tag.onclick =function(){
let bookNum1= document.querySelector('#java');
let bookNum2= document.querySelector('#javaPlus');
let bookNum3= document.querySelector('#db');
let bookNum4= document.querySelector('#html');
let bookSum = parseInt(bookNum1.value) + parseInt(bookNum2.value) + parseInt(bookNum3.value) + parseInt(bookNum4.value);
if (bookSum <= '0') {
alert("구매 개수가 " + bookSum + "개임. 수량 다시 확인!");
return;
}
if (confirm("총 구매 개수가 " + bookSum + "개 맞습니까?")) {
alert("구매 완료!");
}
}
</script>반응형
'Java Script' 카테고리의 다른 글
| [JS] eventListener (0) | 2023.04.12 |
|---|---|
| [JS] 버튼클릭>함수호출>색 변경 (0) | 2023.04.12 |
| [JS] 초단위로 시간 변경 #setInterval (0) | 2023.04.12 |
| [JS] 팝업 #window.open (0) | 2023.04.12 |
| [JS] 배열 함수 (0) | 2023.04.11 |