<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
a,b에 대해서 변수a와 b의 계산 결과를 표시합니다
<br>
<button type="button" onclick="plus()">더하기</button>
<button type="button" onclick="minus()">빼기</button>
<button type="button" onclick="multi()">곱하기</button>
<button type="button" onclick="div()">나머지</button>
<button type="button" onclick="rest()">나머지</button>
<br>
<input type="text" id="a" size="10">
<input type="text" id="oper" size="5">
<input type="text" id="b" size="10">
=
<input type="text" id="result" size="10">
<script type="text/javascript">
let a, b; // 전역변수
function setValue() {
a = parseInt(document.getElementById('a').value);
b = parseInt(document.getElementById('b').value);
}
function plus() {
setValue();
document.getElementById('oper').value = "+";
document.getElementById('result').value = a + b;
}
function minus() {
setValue();
document.getElementById('oper').value = "-";
document.getElementById('result').value = a - b;
}
function multi() {
setValue();
document.getElementById('oper').value = "*";
document.getElementById('result').value = a * b;
}
function div() {
setValue();
if( b == 0) {
alert('계산할 수 없습니다');
return;
}
document.getElementById('oper').value = '/';
document.getElementById('result').value = a / b;
}
function rest() {
setValue();
if( b == 0) {
alert('계산할 수 없습니다');
return;
}
document.getElementById('oper').value = "%";
document.getElementById('result').value = a % b;
}
</script>
</body>
</html>
실행결과
=
(첫번째 수) (두번째 수) (결과값)
첫번째 숫자와 두번째 숫자 입력 후 연산 버튼을 누르면 결과 값이 나온다.
'IT > Html + CSS + JS' 카테고리의 다른 글
| [Html+JavaScript] 미술관 및 박물관 링크 (0) | 2021.06.07 |
|---|---|
| [Html+JavaScript] "1일 1개씩 먹으면 의사 필요없다" (0) | 2021.06.07 |
| [Html+JavaScript] 버튼 클릭 시 홈페이지 배경색 변경 (0) | 2021.06.07 |
| [Html] List (0) | 2021.06.03 |
| [Html] Tag -1 글자태그 (1) | 2021.06.03 |
