select 선택시 자동 계산되게 나오는 스크립트인데 왜 NaN 값이 나올가요? ㅠㅠ
본문
<!--3개의 select 박스의 값을 더하는 스크립트 시작-->
<script language="JavaScript">
function calculatePay() {
var price1 = eval(document.mypay.select1.options.value);
var price2 = eval(document.mypay.select2.options.value);
var price3 = eval(document.mypay.select3.options.value);
document.mypay.pay.value = price1+price2+price3;
}
// -->
</script>
<!--3개의 select 박스의 값을 더하는 스크립트 끝-->
<!--아래와 같이 폼을 구성하세요-->
<form name=mypay method=POST>
<select size="1" name="select1" onChange="calculatePay()">
<option>선택하세요</option>
<option value="100">100</option>
<option value="200">200</option>
<option value="300">300</option>
</select><br>
<select size="1" name="select2" onChange="calculatePay()">
<option value="0" selected>선택하세요</option>
<option value="1000">1000</option>
<option value="2000">2000</option>
</select><br>
<select size="1" name="select3" onChange="calculatePay()">
<option value="0" selected>선택하세요</option>
<option value="10000">10000</option>
<option value="20000">20000</option>
<option value="30000">30000</option>
</select><br>
<input type=reset value="재계산"><br>
합계
<input type=text name=pay size=15>원<br>
</form>
<!--폼 구성 끝-->
답변 3
<!--3개의 select 박스의 값을 더하는 스크립트 시작-->
<script language="JavaScript">
function calculatePay() {
var price1 = document.getElementById("select1").value;
var price2 = document.getElementById("select2").value;
var price3 = document.getElementById("select3").value;
document.mypay.pay.value = parseInt(price1)+ parseInt(price2)+ parseInt(price3);
}
// -->
</script>
<!--3개의 select 박스의 값을 더하는 스크립트 끝-->
<!--아래와 같이 폼을 구성하세요-->
<form name=mypay method=POST>
<select size="1" name="select1" id ="select1" onChange="calculatePay()">
<option value="0">선택하세요</option>
<option value="100">100</option>
<option value="200">200</option>
<option value="300">300</option>
</select><br>
<select size="1" name="select2" id ="select2" onChange="calculatePay()">
<option value="0" selected>선택하세요</option>
<option value="1000">1000</option>
<option value="2000">2000</option>
</select><br>
<select size="1" name="select3" id ="select3" onChange="calculatePay()">
<option value="0" selected>선택하세요</option>
<option value="10000">10000</option>
<option value="20000">20000</option>
<option value="30000">30000</option>
</select><br>
<input type=reset value="재계산"><br>
합계
<input type=text name=pay size=15>원<br>
</form>
<!--폼 구성 끝-->
이렇게 해보세요. 각 셀렉트박스에 id 값 추가
select1 선택하세요. value에 0 추가
아 감사합니다. 잘 되네요 ^^
eval 보다 Number나 parseInt 함수를 쓰시는게 나을거 같네요.
정수 => Number(value), parseInt(value)
실수 => parseFloat(value)
아 동일한데욤 ㅠㅠ
데이터 가져오는 방식부터 잘못된거 같은데요.
<select size="1" name="select1" onChange="calculatePay()"> 이부분을
<select size="1" id="select1" onChange="calculatePay()"> 이런식으로 변경하고
스크립트에서 계산하는 부분도
var price1 = document.getElementById("select1");
price1 = price1.options[price1.selectedIndex].value;
이런식으로 변경해서 해야 될거 같네요
<script>
function calculatePay() {
var f = document.forms['mypay'];
var price1 = eval(f.select1.options[f.select1.selectedIndex].value);
var price2 = eval(f.select2.options[f.select2.selectedIndex].value);
var price3 = eval(f.select3.options[f.select3.selectedIndex].value);
f.pay.value = price1+price2+price3;
}
</script>
or
* jquery
<script>
function calculatePay() {
var price1 = $('select[name=select1]').val();
var price2 = $('select[name=select2]').val();
var price3 = $('select[name=select3]').val();
var sum = price1 + price2 + price3;
$('input[name=pay]').val(sum);
}
</script>
