방법1. 값을 배열로 받아 체크상태 확인 후 총 합 출력
<body>
<h2>체육관 이용 요금</h2>
기본사용료(2면, 4시간) 48,000원<br><br>
<input type="checkbox" name="option" id="ch1" value="20000" onclick="sum()"> 야간조명 (20,000원) <br>
<input type="checkbox" name="option" id="ch2" value="4000" onclick="sum()"> 배구 네트x2면 (4,000원)<br>
<input type="checkbox" name="option" id="ch3" value="5000" onclick="sum()"> 배구x10개 (5,000원) <br>
합계금액 <input type="text" id="result" value="40800">원정 <br>
<script type="text/javascript">
function sum() {
let value = document.getElementsByName("option");
let sum = 0;
let a=0;
let b=0;
let c=0;
if (value[0].checked) {
a = parseInt(value[0].value);
}
if (value[1].checked) {
b = value[1].value*1;
}
if (value[2].checked) {
c = value[2].value*1;
}
sum = a+b+c;
document.getElementById("result").value = sum;
}
</script>
</body>
방법2. form을 name으로 묶어 배열로 받고, 체크값을 true/false로 받아 연산 후 총합에 더함
+체육관 이용요금을 Tag id없이 <script>에서 수정하기
->0번지(첫번째) body 태그의 안의 0번지(첫번째) h1태그를 html로 가져옴
<body>
<h1>체육관 이용 요금</h1>
기본사용료(2면, 4시간) 48,000원<br><br>
<form name="frm">
<input type="checkbox" onclick="sum(0)" id="ch1" value="20000">야간조명(20,000원)
<br>
<input type="checkbox" onclick="sum(1)" id="ch2" value="4000">배구 네트 x 2장(4,000원)
<br>
<input type="checkbox" onclick="sum(2)" id="ch3" value="5000">배구공 x 10(5,000원)
<br>
<br>
합계금액:<input type="text" id="t1" value="48000">원정
</form>
<h1>감사합니다</h1>
<script type="text/javascript">
let total = parseInt( document.getElementById('t1').value ); // 40800
let arr = new Array(3);
for(i = 0;i < arr.length; i++){
arr[i] = parseInt( document.getElementById('ch' + (i + 1)).value );
// alert(arr[i]);
}
//arr[1] = parseInt( document.getElementById('ch2').value );
//arr[2] = parseInt( document.getElementById('ch3').value );
function sum( num ) {
// alert( document.frm.elements[0].value );
// alert( document.frm.elements[0].checked );
if( document.frm.elements[num].checked == true ){
total = total + arr[num];
}else{
total = total - arr[num];
}
document.frm.elements[3].value = total;
let obj = document.getElementsByTagName("body")[0];
alert( obj.getElementsByTagName("h1")[0].innerHTML );
obj.getElementsByTagName("h1")[1].innerHTML = '안녕히 가십시오';
}
</script>
</body>
방법3. 파라미터에 따른 체크박스 id를 각각 받고 그에따른 값을 받아와 연산을 함.
<body>
<h1>체육관 이용 요금</h1>
기본 사용료(4시간)40,800원
<br><br>
<input type="checkbox" onclick="sum(0)" id="ch1" value="20000">야간조명(20,000원)
<br>
<input type="checkbox" onclick="sum(1)" id="ch2" value="4000">배구 네트 x 2장(4,000원)
<br>
<input type="checkbox" onclick="sum(2)" id="ch3" value="5000">배구공 x 10(5,000원)
<br>
<br>
합계금액:<input type="text" id="t1" value="40800">원정
<script type="text/javascript">
let total = parseInt( document.getElementById('t1').value ); // 40800
function sum( num ) {
// alert('호출');
// let val = document.getElementById("ch1").value;
// alert(val);
// let state = document.getElementById('ch1').checked; // true/false
// alert(state);
let checkboxId;
if(num == 0){
checkboxId = 'ch1';
}else if(num == 1){
checkboxId = 'ch2';
}else if(num == 2){
checkboxId = 'ch3';
}
// alert(checkboxId);
let ch1 = document.getElementById(checkboxId).checked; //true or false
let value = parseInt( document.getElementById(checkboxId).value );
if(ch1 == true){
total = total + value;
}else{
total = total - value;
}
document.getElementById('t1').value = total;
}
</script>
</body>
'Java Script > work' 카테고리의 다른 글
| 변수의 연산 (0) | 2020.07.09 |
|---|---|
| 라면 타이머 (0) | 2020.07.09 |
| 버튼 눌러 현재 시간 출력하기(타이머ver), 시간 set/get (0) | 2020.07.08 |
| 입력창에 입력받아 화면에 출력 (0) | 2020.07.08 |
| 버튼클릭하여 원하는 값 출력 (0) | 2020.07.08 |
