Загрузка данных
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Калькулятор</title>
<script>
var op, result, num1, num2;
// Основная функция вычисления
function func() {
num1 = Number(document.getElementById("num1").value);
num2 = Number(document.getElementById("num2").value);
// Используем switch, как было на фото преподавателя
switch(op) {
case '+': result = num1 + num2; break;
case '-': result = num1 - num2; break;
case '*': result = num1 * num2; break;
case '/': result = num1 / num2; break;
case 'sqrt': result = Math.sqrt(num1); break; // Добавленный корень
}
// Выводим результат
document.getElementById("result").innerHTML = result;
}
// Функции изменения цвета кнопок
function color_plus() {
document.getElementById("plus").style.background = 'red';
document.getElementById("minus").style.background = '';
document.getElementById("umnoj").style.background = '';
document.getElementById("del").style.background = '';
document.getElementById("sqrt").style.background = '';
}
function color_minus() {
document.getElementById("plus").style.background = '';
document.getElementById("minus").style.background = 'red';
document.getElementById("umnoj").style.background = '';
document.getElementById("del").style.background = '';
document.getElementById("sqrt").style.background = '';
}
function color_umnoj() {
document.getElementById("plus").style.background = '';
document.getElementById("minus").style.background = '';
document.getElementById("umnoj").style.background = 'red';
document.getElementById("del").style.background = '';
document.getElementById("sqrt").style.background = '';
}
function color_del() {
document.getElementById("plus").style.background = '';
document.getElementById("minus").style.background = '';
document.getElementById("umnoj").style.background = '';
document.getElementById("del").style.background = 'red';
document.getElementById("sqrt").style.background = '';
}
// Функция цвета для новой кнопки корня
function color_sqrt() {
document.getElementById("plus").style.background = '';
document.getElementById("minus").style.background = '';
document.getElementById("umnoj").style.background = '';
document.getElementById("del").style.background = '';
document.getElementById("sqrt").style.background = 'red';
}
// Функция очистки всей формы
function clean() {
// Сбрасываем цвета
document.getElementById("plus").style.background = '';
document.getElementById("minus").style.background = '';
document.getElementById("umnoj").style.background = '';
document.getElementById("del").style.background = '';
document.getElementById("sqrt").style.background = '';
// Очищаем поля и результат
document.getElementById("num1").value = '';
document.getElementById("num2").value = '';
document.getElementById("result").innerHTML = '';
// Сбрасываем выбранную операцию
op = '';
}
</script>
</head>
<body>
Значение1: <input type="number" id="num1"><br><br>
Действие:<br>
<button id="plus" onclick="op='+'; color_plus();">+</button>
<button id="minus" onclick="op='-'; color_minus();">-</button>
<button id="umnoj" onclick="op='*'; color_umnoj();">*</button>
<button id="del" onclick="op='/'; color_del();">/</button>
<!-- Добавленная кнопка корня -->
<button id="sqrt" onclick="op='sqrt'; color_sqrt();">√</button>
<br><br>
Значение2: <input type="number" id="num2"><br><br>
<button onclick="func()">Выполнить</button>
<button style="background:pink;" onclick="clean()">Clean me, please</button>
<br><br>
Результат: <span id="result"></span><br><br>
</body>
</html>