728x90
문제 설명
DOM 객체와 자바스크립트를 사용하여 계산기(+, -, *) 프로그램을 만드시오.
(계산기는 +, -, * 3개가 전부 되어야 함)
코드
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>계산기</title>
<style>
input, button, select {
margin: 5px;
}
</style>
</head>
<body>
<input type="text" id="num1" placeholder="숫자를 입력하세요">
<input type="text" id="operator" placeholder="연산자를 입력하세요">
<input type="text" id="num2" placeholder="숫자를 입력하세요">
<button onclick="calculate()">계산</button>
<h3>결과: <span id="result">0</span></h3>
<script>
function add(num1, num2) {
return num1 + num2;
}
function subtract(num1, num2) {
return num1 - num2;
}
function multiply(num1, num2) {
return num1 * num2;
}
function calculate() {
// 입력된 숫자 가져오기
var num1 = parseFloat(document.getElementById('num1').value);
var num2 = parseFloat(document.getElementById('num2').value);
var operator = document.getElementById('operator').value;
// 계산 수행
var result;
switch (operator) {
case '+':
result = add(num1, num2);
break;
case '-':
result = subtract(num1, num2);
break;
case '*':
result = multiply(num1, num2);
break;
default:
result = '잘못된 연산자';
}
// 결과 화면에 출력
document.getElementById('result').innerText = result;
}
</script>
</body>
</html>728x90
'Programming Language > HTML & CSS & JavaScript' 카테고리의 다른 글
| [HTML & CSS & JavaScript] 짝수의 합과 홀수의 합을 계산하는 계산기 실습 (0) | 2023.12.28 |
|---|---|
| [HTML & CSS & JavaScript] 자바스크립트 코어객체와 배열 (10주차) (0) | 2023.12.28 |
| [HTML & CSS & JavaScript] 자바스크립트 (식과 연산자, 조건문, 반복문, 함수) (9주차) (0) | 2023.12.28 |
| [HTML & CSS & JavaScript] HTML5 기본 문서 만들기 #2 (3주차) (0) | 2023.11.23 |
| [HTML & CSS & JavaScript] HTML5 기본 문서 만들기 #1 (2주차) (0) | 2023.11.23 |
