PC방 이용요금
기본 사용료 1시간 : 1000원
예제
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>PC방 이용요금</h1>
기본 사용료 1시간 : 1000원
<br><br>
<form name="pc">
<input type="checkbox" onclick="sum(0)" id="hour1" value="1000">1시간추가 : 1000원<br> <!-- 0번요소 -->
<input type="checkbox" onclick="sum(1)" id="hour3" value="2700">3시간추가 : 2700원<br> <!-- 1번 요소 -->
<input type="checkbox" onclick="sum(2)" id="hour5" value="4200">5시간추가 : 4200원<br><br> <!-- 2번 요소 -->
합계금액 : <input type="text" id="total" value="1000" size="5">원정 <!-- 3번요소 -->
</form>
<script type="text/javascript">
let values = new Array(3); // 배열을 선언하여 값 불러오기
values[0] = parseInt(document.getElementById('hour1').value);
values[1] = parseInt(document.getElementById('hour3').value);
values[2] = parseInt(document.getElementById('hour5').value);
let total = parseInt(document.getElementById('total').value);
function sum(num) {
if(document.pc.elements[num].checked == true){
total = total + values[num];
}else{
total = total - values[num];
}
document.pc.elements[3].value = total;
}
</script>
</body>
</html>
설명
input태그를 form태그로 묶을 경우 input태그는 form태그의 요소가 된다.
script 태그 안에서 배열을 선언 하여 체크박스의 값을 넣어준다.
document.pc.elements[num].checked == true form태그의 name은 pc이고 pc의 요소가 체크될 경우(checked) true를 반환한다.
document.pc.elements[3].value = total; form태그의 3번째 요소 = total에 값을 넣어준다.(요소 시작 번호 : 0)
'IT > JavaScript' 카테고리의 다른 글
| [Html+JavaScript] 라면 타이머 만들기/clearInterval/setInterval/window.close/option value 접근 예시 (0) | 2021.06.07 |
|---|---|
| [Html+JavaScript] 식별자(==Access Attribute (접근 속성))/id/class/name (0) | 2021.06.07 |
| [Html+JavaScript] 계산기(feat.Dom) (0) | 2021.06.06 |
| [Html+JavaScript] 정답을 입력받고 경고창으로 정답 확인하기/조건문/alert (0) | 2021.06.06 |
| [Html+JavaScript] 사진 클릭 시 경고창 띄우기/alert (0) | 2021.06.06 |