javascript좀 봐주세요
본문
Q1. 질문1<br/><br/>
<input type="radio" name="select1" value="0" onClick="sum()"> 1 (0점)<br/>
<input type="radio" name="select1" value="1" onClick="sum()"> 2 (1점)<br/>
<input type="radio" name="select1" value="2" onClick="sum()"> 3 (2점)<br/>
<input type="radio" name="select1" value="3" onClick="sum()"> 4 (3점)<br/><br/>
Q2. 질문2<br/><br/>
<input type="radio" name="select2" value="0" onClick="sum()"> 1 (0점)<br/>
<input type="radio" name="select2" value="1" onClick="sum()"> 2 (1점)<br/><br/>
Q3. 질문3<br/><br/>
<input type="radio" name="select3" value="0" onClick="sum()"> 1 (0점)<br/>
<input type="radio" name="select3" value="1" onClick="sum()"> 2 (1점)<br/><br/>
Q4. 질문4<br/><br/>
<input type="radio" name="select4" value="0" onClick="sum()"> 1 (0점)<br/>
<input type="radio" name="select4" value="1" onClick="sum()"> 2 (1점)<br/>
<input type="radio" name="select4" value="2" onClick="sum()"> 3 (2점)<br/>
<input type="radio" name="select4" value="3" onClick="sum()"> 4 (3점)<br/><br/>
Q5. 질문5<br/><br/>
<input type="radio" name="select5" value="0" onClick="sum()"> 1 (0점)<br/>
<input type="radio" name="select5" value="1" onClick="sum()"> 2 (1점)<br/><br/>
Q6. 질문6<br/><br/>
<input type="radio" name="select6" value="0" onClick="sum()"> 1 (0점)<br/>
<input type="radio" name="select6" value="1" onClick="sum()"> 2 (1점)<br/><br/>
총점 : <input type="text" name="txtSum" id="txtSum" value="0" readonly>
<script type="text/javascript">
function sum(){
var add1 = $(':radio[name="select1"]:checked').val();
var add2 = $(':radio[name="select2"]:checked').val();
var add3 = $(':radio[name="select3"]:checked').val();
var add4 = $(':radio[name="select4"]:checked').val();
var add5 = $(':radio[name="select5"]:checked').val();
var add6 = $(':radio[name="select6"]:checked').val();
var sum = (parseInt(add1) + parseInt(add2) + parseInt(add3) + parseInt(add4) + parseInt(add5) + parseInt(add6));
document.getElementById("txtSum").value = sum;
}
</script>
라디오버튼으로 선택 후 각 value 값을 더해서 text 박스에 넣으려고 합니다
6개 전부를 선택하면 합산하여 나오지만 하나하나 선택하면 text박스에 Nan이 뜹니다.
선택할 때마다 실시간으로 text박스에 더한값이 나오게 하려면 어떻게 해야하나요?
답변 2
선택된 것이 없는 상태에서 생기는 오류이니,
아래와 같이 0점에 해당하는 항목을 선택된 것으로 처리하면 될것 같습니다.
<input type="radio" name="select1" value="0" onClick="sum()" checked>
...
<input type="radio" name="select2" value="0" onClick="sum()" checked>
...
<input type="radio" name="select3" value="0" onClick="sum()" checked>
...
<input type="radio" name="select4" value="0" onClick="sum()" checked>
...
<input type="radio" name="select5" value="0" onClick="sum()" checked>
...
<input type="radio" name="select6" value="0" onClick="sum()" checked>
우선 NaN 이란 Not as Number 의 줄임말입니다.
하나의 값이 숫자여도 parseInt 를 처리하는 부분이 null 이라면 숫자로 표현할 수 없죠 그래서 나타나는 에러입니다.
위에 답변처럼 디폴트를 checked 하는 방법도 있고
애초에 각각의 변수 add1~add6 까지의 디폴트 값을 0으로 잡아주고 sum 하시면 나오지 않는 이슈입니다.
