Калькулятор на JS

@DaryaPopova · Регистрация: 07.01.2020

Студворк — интернет-сервис помощи студентам

Здравствуйте! Не могу добавить следующие действия своему калькулятору: Возведение в степень, нахождение Максимума, Минимума, Вывод ошибки при введении (к примеру - 8..9 (на уровне числа проверять корректность ввода)), Деление на 0.

Другие действия работают на калькуляторе. Буду благодарна! Спасибо заранее!

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Калькулятор</title>
    <link rel="stylesheet" type="text/css" href="style.css">
 
</head>
<body>
<div id="calc-wrap">
    <div id="border">
        <div id="calc">
            <textarea id=sum>0</textarea>
        </div>
        <img src="img/5.png" alt="devushka">
    </div>
</div>
<script type="text/javascript" src="script.js"></script>
</body>
</html>

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
window.addEventListener('load', function OnWindowLoaded() {    //функция, при которой появится набор кнопок
 
    var signs = [
        '1', '2', '3', '+',
        '4', '5', '6', '-',
        '7', '8', '9', '/',
        '0','*' , '.', 'DEL','c',
        '^', 'max', 'min', '='
    ];
    document.getElementById('sum').disabled = true; // форма калькулятора
    var calc = document.getElementById('calc');  // текстовое поле вывода
    var textArea = document.getElementById('sum'); // Добавление кнопок к форме калькулятора
    
    signs.forEach(function (sign) {
        var signElement = document.createElement('div');
        signElement.className = 'btn';
        signElement.innerHTML = sign; //преобразует в строку
        calc.appendChild(signElement);  //Метод appendChild() вставляет новый элемент в DOM структуру документа. ( 1-2, а не 2-1)
    });
 
    
    document.querySelectorAll('#calc-wrap .btn').forEach(function (button) {  // Добавляем действие, выполняемое при клике на любую кнопку
        button.addEventListener('click', onButtonClick);   // функция клика по кнопке калькулятора
    });
 
    function onButtonClick(e) {
        
  
        if (e.target.innerHTML === 'DEL') {  // Если нажата кнопка "del", то стирает все из текстового поля
            textArea.innerHTML = '0';
        } else if (e.target.innerHTML === '=') {  // Если нажата кнопка "=", то, приведя выражение
           if e.target.innerHTML === '^'  4^5
 
           textArea.innerHTML = eval(textArea.innerHTML); // в текстовом поле к javascript, вычислить значение "5+7"   "2^4" "34min35"
        } else if (textArea.innerHTML === '0') {
            textArea.innerHTML = e.target.innerHTML;
        } else if (e.target.innerHTML === 'c'){
            textArea.innerHTML = textArea.innerHTML.substring(0, textArea.innerHTML.length - 1);
        } else if (e.target.innerHTML === '^'){ 
        step() 
        } else {
            // Добавление значения кнопки в текстовое поле
            textArea.innerHTML += e.target.innerHTML;
        }
        
    }
function step() {
    var res1, res2;
    var screen = document.querySelector('.output');
        sim =  textArea.innerHTML.indexOf('^');
        res1 = textArea.innerHTML.substring(0, sim);
        res2 = textArea.innerHTML.substring(sim + 1);
        textArea.innerHTML = Math.pow(res1, res2); 
}
});

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
body {
    background: #ECECEC;
}
img {
width: 370px;
height: 370px;
}
.btn {
    width: 60px;
    height: 60px;
    background: #C71585;
    display: inline-block;
    text-align: center;
    line-height: 60px;
    user-select: none;
}
.btn:last-child {
    width: 240px;
    margin-top: 2px;
}
#calc-wrap {
    padding: 10px;
    width: 100%;
    display: flex;
    justify-content: center;
}
 
#calc {
    width: 900px;
    display: inline-block;
}
 
#sum {
    width: 236px;
    border: 0;
    font-size: 20px;
    resize: vertical;
    background: #C71585;
}
#border{
    display: flex;
    justify-content: center;
    align-items: center;
    border: 2px dashed #C71585;
    width: 640px;
    height: 370px;
}

@DaryaPopova · 08.01.2020, 18:03 **[ТС]**

Добавить следующие действия калькулятору: Возведение в степень, нахождение Максимума, Минимума, Вывод ошибки при введении (к примеру - 8..9 (на уровне числа проверять корректность ввода)), Деление на 0.

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Калькулятор</title>
    <link rel="stylesheet" type="text/css" href="style.css">
 
</head>
<body>
<div id="calc-wrap">
    <div id="border">
        <div id="calc">
            <textarea id=sum>0</textarea>
        </div>
        <img src="img/5.png" alt="devushka">
    </div>
</div>
<script type="text/javascript" src="script.js"></script>
</body>
</html>

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
window.addEventListener('load', function OnWindowLoaded() {    //функция, при которой появится набор кнопок
 
    var signs = [
        '1', '2', '3', '+',
        '4', '5', '6', '-',
        '7', '8', '9', '/',
        '0','*' , '.', 'DEL','c',
        '^', 'max', 'min', '='
    ];
    document.getElementById('sum').disabled = true; // форма калькулятора
    var calc = document.getElementById('calc');  // текстовое поле вывода
    var textArea = document.getElementById('sum'); // Добавление кнопок к форме калькулятора
    
    signs.forEach(function (sign) {
        var signElement = document.createElement('div');
        signElement.className = 'btn';
        signElement.innerHTML = sign; //преобразует в строку
        calc.appendChild(signElement);  //Метод appendChild() вставляет новый элемент в DOM структуру документа. ( 1-2, а не 2-1)
    });
 
    
    document.querySelectorAll('#calc-wrap .btn').forEach(function (button) {  // Добавляем действие, выполняемое при клике на любую кнопку
        button.addEventListener('click', onButtonClick);   // функция клика по кнопке калькулятора
    });
 
    function onButtonClick(e) {
        
  
        if (e.target.innerHTML === 'DEL') {  // Если нажата кнопка "del", то стирает все из текстового поля
            textArea.innerHTML = '0';
        } else if (e.target.innerHTML === '=') {  // Если нажата кнопка "=", то, приведя выражение
           if e.target.innerHTML === '^'  4^5
 
           textArea.innerHTML = eval(textArea.innerHTML); // в текстовом поле к javascript, вычислить значение "5+7"   "2^4" "34min35"
        } else if (textArea.innerHTML === '0') {
            textArea.innerHTML = e.target.innerHTML;
        } else if (e.target.innerHTML === 'c'){
            textArea.innerHTML = textArea.innerHTML.substring(0, textArea.innerHTML.length - 1);
        } else if (e.target.innerHTML === '^'){ 
        step() 
        } else {
            // Добавление значения кнопки в текстовое поле
            textArea.innerHTML += e.target.innerHTML;
        }
        
    }
function step() {
    var res1, res2;
    var screen = document.querySelector('.output');
        sim =  textArea.innerHTML.indexOf('^');
        res1 = textArea.innerHTML.substring(0, sim);
        res2 = textArea.innerHTML.substring(sim + 1);
        textArea.innerHTML = Math.pow(res1, res2); 
}
});

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
body {
    background: #ECECEC;
}
img {
width: 370px;
height: 370px;
}
.btn {
    width: 60px;
    height: 60px;
    background: #C71585;
    display: inline-block;
    text-align: center;
    line-height: 60px;
    user-select: none;
}
.btn:last-child {
    width: 240px;
    margin-top: 2px;
}
#calc-wrap {
    padding: 10px;
    width: 100%;
    display: flex;
    justify-content: center;
}
 
#calc {
    width: 900px;
    display: inline-block;
}
 
#sum {
    width: 236px;
    border: 0;
    font-size: 20px;
    resize: vertical;
    background: #C71585;
}
#border{
    display: flex;
    justify-content: center;
    align-items: center;
    border: 2px dashed #C71585;
    width: 640px;
    height: 370px;
}

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Реализация движения на Box2D v3 - трение и коллизии с повёрнутыми стенами 8Observer8 20.02.2026 Содержание блога Box2D позволяет легко создать главного героя, который не проходит сквозь стены и перемещается с заданным трением о препятствия, которые можно располагать под углом, как верхнее. . .	Конвертировать закладки radiotray-ng в m3u-плейлист damix 19.02.2026 Это можно сделать скриптом для PowerShell. Использование . \СonvertRadiotrayToM3U. ps1 <path_to_bookmarks. json> Рядом с файлом bookmarks. json появится файл bookmarks. m3u с результатом. # Check if. . .	Семь CDC на одном интерфейсе: 5 U[S]ARTов, 1 CAN и 1 SSI Eddy_Em 18.02.2026 Постепенно допиливаю свою "многоинтерфейсную плату". Выглядит вот так: https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11617&stc=1&d=1771445347 Основана на STM32F303RBT6. На борту пять. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .
И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.	«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»	SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .