-
자바스크립트 javascript 버튼 클릭하여 inputtype 연산 더하기 계산 합계 구하기Javascript 2021. 2. 23. 21:03
자바스크립트 버튼 onclick 이벤트로 클릭하여 총 합계를 출력하는 계산기 기능을 구현해보았다
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>버튼/합계 계산하기</title> <script> var sum = 0;//함수 안에 지역변수로 선언하면 0으로 계속 초기화돼서 sum+=으로 더해지지 않는 거였음. function calc(button) { if(button) sum+= parseInt(button.value);//parseInt를 안하면 값이 더하기가 안되고 옆에 붙여넣기가 됨 else sum-= button.value; document.getElementById("sumtext").value = sum; } //this는 이 버튼을 클릭했을 때 참조값 //function()에 들어갈 변수이름은 아무거나 </script> </head> <body class="body"> <h3>선택된 물품 버튼/합계 계산하기</h3> <hr> <form> <button type = "button" id="c1" value="10000" onclick="calc(this)">모자 1만원</button> <button type = "button" id="c2" value="30000" onclick="calc(this)">구두 3만원</button> <button type = "button" id="c3" value="80000" onclick="calc(this)">명품가방 8만원</button> 총 합계는 <input type="text" id="sumtext" value="" > </form> </body> </html>모자 1만원 버튼 클릭 시 총 합계 출력
3개 버튼 모두 클릭하면 더하기 연산하여 합계 금액이 출력된다
1. var sum =0; 변수를 전역변수로 함수 밖에서 선언하여야 함수 안에서 0으로 초기화되지 않는다.
함수 안에서 선언 시 0으로 초기화되어 sum+= button.value; 기능으로 클릭시 value값이 누적되지 않는다.
2. parseInt()는 문자열을 정수로 바꿔주는 메서드인데 value값 안을 문자열로 인식하여 함수 안에서 구현하지 않으면 문자열로 인식하여 값을 더하는 게 아니라 옆으로 붙여넣기가 된다. (value값에서 문자열 "" 표시를 빼도 문자열로 인식함)
3. onclick 안에 함수에서 이버튼 값을 누르면(클릭하면) 기능 구현한다를 -> 함수 안에 this 참조값을 넣어서 활용하기
4. 구현할 함수값 변수는 아무거나 선언해도 됨
5. value값으로 구하지 않고 for문, if문, switch문으로 구하는 방법도 따로 연습해보기
반응형