Мой первый калькулятор...
Всем привет! Как и многие решил написать свой калькулятор. Хочу вот полностью на JS. Только разметка на HTML и немного CSS магии. Пробовал через switch, не понял как реализовать в моем случае. Сам понимаю, что выглядит ужасно, но все же прошу помочь.:help:
Сейчас не работает равно, уже перетыкал все, что приходит на ум. В перспективе хотелось бы, конечно, что бы работал не только с двумя числами, но пока имеем, что умеем)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/css/bootstrap-reboot.min.css">
<link rel="stylesheet" href="/css/bootstrap-grid.min.css">
<link rel="stylesheet" href="/css/bootstrap-grid.css.map">
<link rel="stylesheet" href="/css/bootstrap-reboot.css.map">
<link rel="stylesheet" href="css/index.css">
<title>Document</title>
</head>
<body>
<div class="main">
<div class="container">
<div class="row">
<div class="col-md-3 offset-md-4">
<div class="main_input">
<input placeholder="Введите число" type="text" readonly>
</div>
</div>
</div>
<div class="main_btn">
<div class="col-md-3 offset-md-4">
<button id="operation_clear" class="main_btn_calc">AC</button>
<button id="operation_plus" class="main_btn_calc">+</button>
<button id="operation_minus" class="main_btn_calc">-</button>
<button id="operation_equals" class="main_btn_calc">=</button>
</div>
<div class="col-md-3 offset-md-4">
<button id="num_1" class="main_btn_calc">1</button>
<button id="num_2" class="main_btn_calc">2</button>
<button id="num_3" class="main_btn_calc">3</button>
<button id="operation_mul" class="main_btn_calc">Х</button>
</div>
<div class="col-md-3 offset-md-4">
<button id="num_4" class="main_btn_calc">4</button>
<button id="num_5" class="main_btn_calc">5</button>
<button id="num_6" class="main_btn_calc">6</button>
<button id="operation_divide" class="main_btn_calc">/</button>
</div>
<div class="col-md-3 offset-md-4">
<button id="num_7" class="main_btn_calc">7</button>
<button id="num_8" class="main_btn_calc">8</button>
<button id="num_9" class="main_btn_calc">9</button>
</div>
<div class="col-md-3 offset-md-4">
<button id="num_0" class="main_btn_calc">0</button>
<button id="operation_dot" class="main_btn_calc">.</button>
<button id="operation_del" class="main_btn_calc">⌫</button>
</div>
</div>
</div>
</div>
</div>
<script src="index.js"></script>
</body>
</html>
'use strict'
function Calculator() {
const input = document.querySelector('input');
const btn = document.querySelector('button.main_btn_calc');
const clearBtn = document.querySelector('#operation_clear');
const plusBtn = document.querySelector('#operation_plus');
const divideBtn = document.querySelector('#operation_divide');
const mulBtn = document.querySelector('#operation_mul');
const minusBtn = document.querySelector('#operation_minus');
const equalsBtn = document.querySelector('#operation_equals');
const delBtn = document.querySelector('#operation_del');
const dot = document.querySelector('#operation_dot');
const zero = document.querySelector('#num_0');
const one = document.querySelector('#num_1');
const two = document.querySelector('#num_2');
const three = document.querySelector('#num_3');
const four = document.querySelector('#num_4');
const five = document.querySelector('#num_5');
const six = document.querySelector('#num_6');
const seven = document.querySelector('#num_7');
const eight = document.querySelector('#num_8');
const nine = document.querySelector('#num_9');
function onClick(number) {
number.addEventListener('click', () => {
input.value += number.innerHTML;
})
}
onClick(one);
onClick(two);
onClick(three);
onClick(four);
onClick(five);
onClick(six);
onClick(seven);
onClick(eight);
onClick(nine);
onClick(zero);
onClick(dot);
// onClick(plus);
// onClick(minus);
// onClick(divide);
// onClick(mul);
clearBtn.addEventListener('click', () => {
input.value = "";
})
delBtn.addEventListener('click', () => {
input.value = input.value.slice(0, -1);
})
let num1;
let num2;
function plus() {
plusBtn.addEventListener('click', () => {
num1 = input.value;
input.value = '';
})
}
function minus() {
minusBtn.addEventListener('click', () => {
num1 = input.value;
input.value = '';
})
}
function multiple() {
mulBtn.addEventListener('click', () => {
num1 = input.value;
input.value = '';
})
}
function divide() {
divideBtn.addEventListener('click', () => {
num1 = input.value;
input.value = '';
})
}
if (minus()) {
equalsBtn.addEventListener('click', () => {
num2 = input.value;
input.value = Number(num1) - Number(num2);
})
}else if (plus()) {
equalsBtn.addEventListener('click', () => {
num2 = input.value;
input.value = Number(num1) + Number(num2);
})
}else if(multiple()) {
equalsBtn.addEventListener('click', () => {
num2 = input.value;
input.value = Number(num1) * Number(num2);
})
}else if (divide()) {
equalsBtn.addEventListener('click', () => {
num2 = input.value;
input.value = Number(num1) / Number(num2);
})
}
}
document.addEventListener("DOMContentLoaded", Calculator);
Код:
.main { |
bizunowvova,
:(
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.1.3/css/bootstrap-reboot.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.1.3/css/bootstrap-grid.min.css">
<style type="text/css">
.main {
padding: 20px 0 0 0;
}
/* .main .main_input {
} */
.main .main_btn {
margin-top: 10px;
margin-left: 10px;
display: flex;
flex-direction: column;
}
.main .main_btn .main_btn_calc {
margin: 2px;
width: 35px;
height: 35px;
border: none;
}
</style>
<title>Document</title>
</head>
<body>
<div class="main">
<div class="container">
<div class="row">
<div class="col-md-3 offset-md-4">
<div class="main_input">
<input placeholder="Введите число" type="text" readonly>
</div>
</div>
</div>
<div class="main_btn">
<div class="col-md-3 offset-md-4">
<button id="operation_clear" class="main_btn_calc">AC</button>
<button id="operation_plus" class="main_btn_calc">+</button>
<button id="operation_minus" class="main_btn_calc">-</button>
<button id="operation_equals" class="main_btn_calc">=</button>
</div>
<div class="col-md-3 offset-md-4">
<button id="num_1" class="main_btn_calc">1</button>
<button id="num_2" class="main_btn_calc">2</button>
<button id="num_3" class="main_btn_calc">3</button>
<button id="operation_mul" class="main_btn_calc">Х</button>
</div>
<div class="col-md-3 offset-md-4">
<button id="num_4" class="main_btn_calc">4</button>
<button id="num_5" class="main_btn_calc">5</button>
<button id="num_6" class="main_btn_calc">6</button>
<button id="operation_divide" class="main_btn_calc">/</button>
</div>
<div class="col-md-3 offset-md-4">
<button id="num_7" class="main_btn_calc">7</button>
<button id="num_8" class="main_btn_calc">8</button>
<button id="num_9" class="main_btn_calc">9</button>
</div>
<div class="col-md-3 offset-md-4">
<button id="num_0" class="main_btn_calc">0</button>
<button id="operation_dot" class="main_btn_calc">.</button>
<button id="operation_del" class="main_btn_calc">⌫</button>
</div>
</div>
</div>
</div>
<script>
'use strict'
function Calculator() {
const input = document.querySelector('input');
const btn = document.querySelector('button.main_btn_calc');
const clearBtn = document.querySelector('#operation_clear');
const plusBtn = document.querySelector('#operation_plus');
const divideBtn = document.querySelector('#operation_divide');
const mulBtn = document.querySelector('#operation_mul');
const minusBtn = document.querySelector('#operation_minus');
const equalsBtn = document.querySelector('#operation_equals');
const delBtn = document.querySelector('#operation_del');
const dot = document.querySelector('#operation_dot');
const zero = document.querySelector('#num_0');
const one = document.querySelector('#num_1');
const two = document.querySelector('#num_2');
const three = document.querySelector('#num_3');
const four = document.querySelector('#num_4');
const five = document.querySelector('#num_5');
const six = document.querySelector('#num_6');
const seven = document.querySelector('#num_7');
const eight = document.querySelector('#num_8');
const nine = document.querySelector('#num_9');
function onClick(number) {
number.addEventListener('click', () => {
input.value += number.innerHTML;
})
}
onClick(one);
onClick(two);
onClick(three);
onClick(four);
onClick(five);
onClick(six);
onClick(seven);
onClick(eight);
onClick(nine);
onClick(zero);
onClick(dot);
let a;
let operation;
let b;
clearBtn.addEventListener('click', () => {
input.value = a = b = operation = "";
})
delBtn.addEventListener('click', () => {
input.value = input.value.slice(0, -1);
})
plusBtn.addEventListener('click', () => {
operation = "+";
a = +input.value;
b = "";
input.value = '';
})
minusBtn.addEventListener('click', () => {
operation = "-";
a = +input.value;
b = "";
input.value = '';
})
mulBtn.addEventListener('click', () => {
operation = "*";
a = +input.value;
b = "";
input.value = '';
})
divideBtn.addEventListener('click', () => {
operation = "/";
a = +input.value;
b = "";
input.value = '';
})
equalsBtn.addEventListener('click', () => {
if (!b) b = +input.value;
switch (operation) {
case "+":
a = input.value = a + b;
break;
case "-":
a = input.value = a / b;
break;
case "*":
a = input.value = a * b;
break;
case "/":
a = input.value = a / b;
break;
default:
input.value = "error";
}
})
}
document.addEventListener("DOMContentLoaded", Calculator);
</script>
</body>
</html>
|
if (minus()) {
Подразумевается, что функция minus вернет что то, что можно преобразовать к true/false Но что возвращают ваши функции?
function minus() {
minusBtn.addEventListener('click', () => {
num1 = input.value;
input.value = '';
})
}
Всегда undefined! Которое преобразуется в false и if ybrjulf yt chf,jnftn/ |
Всем спасибо большое!
|
| Часовой пояс GMT +3, время: 04:17. |