[javascript] input 값 실시간 자동감지 (총점/평균)

👩‍💻 국어, 영어, 수학 점수를 입력하면, 총점과 평균 input 값이 자동으로 계산되도록 한다.

= 나는 onchange() 를 통해 국어, 영어, 수학 input 값의 변경을 감지하도록 코드를 짰다.

onchange 를 안쓰고 이상한 연산 작업만 잔뜩하다가... 드디어 해결

 

✔️ onchange 가 들어간 위치

	<tbody id="score-main">
		<tr id="input-form" align="center" onchange="sumAvg();">
			<td><input type="text" name="hak" id="hak" onfocus="this.select();"></td>
			<td><input type="text" name="name" id="name" onfocus="this.select();"></td>
			<td><input type="text" name="birth" id="birth" onfocus="this.select();"></td>
			<td><input type="text" name="kor" id="kor"  onfocus="this.select();"></td>
			<td><input type="text" name="eng" id="eng"  onfocus="this.select();"></td>
			<td><input type="text" name="mat" id="mat"  onfocus="this.select();"></td>
			<td><input type="text" name="tot" id="tot" readonly="readonly" style="border: none; text-align: center;"></td>
			<td><input type="text" name="ave" id="ave" readonly="readonly" style="border: none; text-align: center;"></td>
			<td>
					<button type="button" class="btn" onclick="insertScore();" style="width: 100%;">등록하기</button>
		</td>
	</tr>
	</tbody>

 

✔️ 총점, 평균 자동 계산 - 자바스크립트

function sumAvg() {
	let f = document.scoreForm;
	
	let kor = Number(f.kor.value);
	let eng = Number(f.eng.value);
	let mat = Number(f.mat.value);
	
	f.tot.value = kor + eng + mat;
	f.ave.value = Math.round(((kor + eng + mat)/3) *100) / 100;
 	 
}