Помогите пож. разобраться с калькулятором. Ошибка при дробном сложении
При дробном сложении появляется множество 000000, эту ошибку знаю и решил убрать ее методом toFixed(1); В итоге он срабатывает даже при сложении целых чисел 1+1 = 2, что логично. Но, какое условие нужно прописать в if, чтоб отелить целые числа от дробных? Подскажите пож.
Кусок код про который идет речь:
function equal() {
const valueInput = document.form.calculator_display.value;
document.form.calculator_display.value = eval(valueInput).toFixed(1);
};
const itemNum = document.querySelectorAll('.item');
function insert(num) {
document.form.calculator_display.value += num;
}
itemNum.forEach(function (element) {
element.addEventListener('click', function () {
if (this.classList.contains('digit')) {
insert(this.innerHTML);
} else if (this.classList.contains('multiply')) {
insert('*');
} else if (this.classList.contains('share')) {
insert('/');
}
if (this.classList.contains('clear')) {
clear();
} else if (this.classList.contains('back')) {
back();
} else if (this.classList.contains('equally')) {
equal();
}
});
});
function clear() {
document.form.calculator_display.value = '';
};
function back() {
const valueInput = document.form.calculator_display.value;
document.form.calculator_display.value = valueInput.substring(
0,
valueInput.length - 1
);
};
function equal() {
const valueInput = document.form.calculator_display.value;
document.form.calculator_display.value = eval(valueInput).toFixed(1);
};
*{
box-sizing: border-box;
}
body{
margin: 0;
padding: 0;
background-color: #2B414E;
font-family: Verdana, Geneva, Tahoma, sans-serif;
}
.calculator{
max-width: 360px;
margin: 50px auto;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-gap: 10px;
padding: 20px;
background-color: #FF6666;
border-radius: 15px;
user-select: none;
box-shadow: 0 0 10px rgba(0,0,0,0.5);
}
.item{
width: 100%;
background-color: #2B414E;
color: #fff;
padding: 15px;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
font-size: 24px;
border-radius: 15px;
}
.item:hover{
transform: scale(1.05);
}
input {
width: 100%;
height: 60px;
border: none;
font-size: 24px;
outline: none;
text-align: right;
border-radius: 15px;
padding: 5px;
}
.input:hover{
transform: none;
}
.input{
grid-column: 1/-1;
border: 5px solid #E2E2E2;
padding: 0;
background-color: #fff;
}
.clear{
grid-column: 1 / span 2;
}
.back{
grid-column: 3 / span 2;
}
.zero{
grid-column: 1/ span 2;
}
.equally{
grid-column: 4;
grid-row: 6/8;
}
<!DOCTYPE html>
<html lang="ru">
<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">
<title>Калькулятор</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="calculator">
<div class="item input">
<form name="form">
<input type="text" name="calculator_display" readonly>
</form>
</div>
<div class="item clear">C</div>
<div class="item back">←</div>
<div class="item digit">+</div>
<div class="item digit">-</div>
<div class="item multiply">×</div>
<div class="item share">÷</div>
<div class="item digit">7</div>
<div class="item digit">8</div>
<div class="item digit">9</div>
<div class="item digit">(</div>
<div class="item digit">4</div>
<div class="item digit">5</div>
<div class="item digit">6</div>
<div class="item digit">)</div>
<div class="item digit">1</div>
<div class="item digit">2</div>
<div class="item digit">3</div>
<div class="item equally">=</div>
<div class="item digit zero">0</div>
<div class="item digit">.</div>
</div>
<script src="main.js"></script>
</body>
</html>