Всем привет. Учу Js. Пишу калькулятор простой. Но не могу сообразить, как совершать математические действия? Есть кнопки с цифрами и математическими знаками. В
value тега
input с id
result присваиваю все значения нажатых кнопок. Но как сделать, чтобы совершать математические действия? Не соображаю уже))
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Моя первая программа</title>
<link rel="stylesheet" href="style.css">
</head>
<body id="body">
<input type="text" id="result">
<br><br><br>
<input type="button" value="1" class="btn">
<input type="button" value="2" class="btn">
<input type="button" value="3" class="btn">
<input type="button" value="+" class="btn btnPlus">
<input type="button" value="/" class="btn btnDivis">
<br>
<input type="button" value="4" class="btn">
<input type="button" value="5" class="btn">
<input type="button" value="6" class="btn">
<input type="button" value="-" class="btn btnMinus">
<br>
<input type="button" value="7" class="btn">
<input type="button" value="8" class="btn">
<input type="button" value="9" class="btn">
<input type="button" value="*" class="btn btnMulti">
<br>
<input type="button" value="0" class="btn zero">
<br>
<input type="button" value="=" class="btn btnRes">
<input type="button" value="Очистить" class="btn btnClear">
<script src="js.js"></script>
</body>
</html>
.btn {
margin-top: 10px;
margin-left: 10px;
width: 40px;
height: 40px;
}
.zero {
margin-left: 64px;
}
.btnPlus, .btnMinus, .btnMulti {
margin-left: 40px;
background-color: green;
}
.btnDivis, .btnRes {
background-color: green;
}
.btnRes {
margin-left: 64px;
}
.btnClear {
margin-left: 15px;
width: 100px;
background-color: green;
}
let result = document.querySelector('#result');
let buttons = document.querySelectorAll('.btn');
for (let button of buttons) {
button.addEventListener('click', function(){
result.value = result.value + this.value;
if (this.value == 'Очистить') {
result.value = '';
}
})
}
