Загрузка данных


<!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>