Создание калькулятора в JavaScript

@ManyLives · Регистрация: 15.10.2012

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

Возникла такая проблема. Есть кнопки и их значение записывается в ячейку "rez". Требуется совершить арифметические действия используя информацию из этой ячейки. Как это реализовать?

HTML5
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
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>калькулятор</title>
<script src="kalku.js">
 
</script>
</head>
<body>
<form>
<fieldset>
    <div align="center">
    
    </div>
                <div align="center">
                <input type="text" size="35" value="0" id="rez" style="text-align: right;"><br>
                <input type="button" onclick="number(1)" value="1" />
                <input type="button" value="2" onclick="number(2)" />
                <input type="button" value="3" onclick="number(3)" />
                <input type="button" value="+" onclick="('+')" />
                <input type="button" value="*" onclick="('*')" /><br>
                <input type="button" value="4" onclick="number(4)" />
                <input type="button" value="5" onclick="number(5)" />
                <input type="button" value="6 "onclick="number(6)"  />
                <input type="button" value="-" onclick="('-')" />
                <input type="button" value="/" onclick="komandy('/')" /><br>
                <input type="button" value="7" onclick="number(7)" />
                <input type="button" value="8" onclick="number(8)" />
                <input type="button" value="9" onclick="number(9)" />
                <input type="button" value="=" onclick="(1)" />
                <input type="reset" value="c" /><br>
                <input type="button" value="0" onclick="number(0)"/>
                </div>
</fieldset>
                
</form>
 
</body>
</html>

а в JS

JavaScript
1
2
3
4
 function number (number){
 if (rez.value==0) rez.value=number;
 else rez.value=rez.value+number;
 }

@Exeil · 12.09.2013, 19:14

HTML5
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
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>калькулятор</title>
<script src="kalku.js">
 
</script>
</head>
<body>
<form>
<fieldset>
    <div align="center">
    
    </div>
                <div align="center">
                <input type="text" size="35" value="0" id="rez" style="text-align: right;"><br>
                <input type="button" onclick="number(1)" value="1" />
                <input type="button" value="2" onclick="number(2)" />
                <input type="button" value="3" onclick="number(3)" />
                <input type="button" value="+" onclick="setOperation('+')" />
                <input type="button" value="*" onclick="('*')" /><br>
                <input type="button" value="4" onclick="number(4)" />
                <input type="button" value="5" onclick="number(5)" />
                <input type="button" value="6 "onclick="number(6)"  />
                <input type="button" value="-" onclick="('-')" />
                <input type="button" value="/" onclick="komandy('/')" /><br>
                <input type="button" value="7" onclick="number(7)" />
                <input type="button" value="8" onclick="number(8)" />
                <input type="button" value="9" onclick="number(9)" />
                <input type="button" value="=" onclick="calc()" />
                <input type="reset" value="c" /><br>
                <input type="button" value="0" onclick="number(0)"/>
                </div>
</fieldset>
                
</form>
 
</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
var funk;
var backValue;
 
function number (number){
 if (rez.value==0) rez.value=number;
 else rez.value=rez.value+number;
 }
 
function moveValue(){
    backValue = rez.value;
    rez.value = '';
}
 
function setOperation(operation){
    if(operation != null){
        switch(operation)
        {
            case '+': funk = function(x, y){ return x + y; }; break;
        }
        moveValue();
    }
}
 
function calc(){
    if(funk != null && backValue != null){
        rez.value = funk(parseInt(backValue), parseInt(rez.value));
    }
}

может так (пример для плюса)

Добавлено через 4 минуты

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
function setOperation(operation){
    if(operation != null){
        funk = operation;
        moveValue();
    }
}
 
function calc(){
    if(funk != null && backValue != null){
        rez.value = eval(backValue + funk + rez.value);
    }
}

Ну или можно так модифицировать эти методы

@ManyLives · 12.09.2013, 19:59 **[ТС]**

Exeil, Спасибо! А есть вариант (попроще) так сказать попонятнее для новичков?

@Exeil · 12.09.2013, 20:19

Сообщение от ManyLives

Exeil, Спасибо! А есть вариант (попроще) так сказать попонятнее для новичков?

HTML5
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
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>калькулятор</title>
<script src="kalku.js">
 
</script>
</head>
<body>
<form>
<fieldset>
    <div align="center">
    
    </div>
                <div align="center">
                <input type="text" size="35" value="0" id="rez" style="text-align: right;">
                <br>
                <input type="button" value="1" onclick="addNumber(1)" />
                <input type="button" value="2" onclick="addNumber(2)" />
                <input type="button" value="3" onclick="addNumber(3)" />
                <input type="button" value="+" onclick="setOperation('+')" />
                <input type="button" value="*" onclick="setOperation('*')" />
                <br>
                <input type="button" value="4" onclick="addNumber(4)" />
                <input type="button" value="5" onclick="addNumber(5)" />
                <input type="button" value="6 "onclick="addNumber(6)"  />
                <input type="button" value="-" onclick="setOperation('-')" />
                <input type="button" value="/" onclick="setOperation('/')" />
                <br>
                <input type="button" value="7" onclick="addNumber(7)" />
                <input type="button" value="8" onclick="addNumber(8)" />
                <input type="button" value="9" onclick="addNumber(9)" />
                <input type="button" value="=" onclick="calc()" />
                <input type="reset" value="c" />
                <br>
                <input type="button" value="0" onclick="addNumber(0)"/>
                </div>
</fieldset>
                
</form>
 
</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
var operator; //Оператор +,-,*,/
var oneOperand; //Первый операнд
 
//Очистка поля ввода
function clear(){
    rez.value = 0;
}
 
//Добавляет цифру в поле ввода
function addNumber(number){
     if (rez.value==0) rez.value=number;
     else rez.value=rez.value+number;
 }
 
 //Сохрнаяет операнд в переменной oneOperand
function saveOperand(){
    oneOperand = parseInt(rez.value); //конвертируем строку в число
    clear();
}
 
 //Изменяет текущую операцию
function setOperation(x){
    operator = x;
    saveOperand();
}
 
 //Применяет вычисление
function calc(){
    //Если оператор и первый операнд задан
    if(operator != null && oneOperand != null){
        var result;
        //Конвертируем из строки в число второй операнд
        var secondOperand = parseInt(rez.value);
        
        //Применяем соответствующую операцию
        switch(operator)
        {
            case '+': result =  oneOperand + secondOperand; break;
            case '-': result =  oneOperand - secondOperand; break;
            case '*': result =  oneOperand * secondOperand; break;
            case '/': result =  oneOperand / secondOperand; break;
        }
        
        //Выводим результат
        rez.value = result;
    }
}

может комментарии помогут

@ManyLives · 13.09.2013, 14:02 **[ТС]**

Exeil, Огромное спасибо! Комментарии помогли.
Тема закрыта.

Новые блоги и статьи Все статьи Все блоги /
Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	Киев стоит - украинская песня zorxor 28.01.2026 wfWdiRqdTxc О Господи, Вечный, Ты . . . Я помоги, Бесконечный. . . Я прошу Ты. . . Я погибаю, спаси. . . Я прошу Тебя Вечный. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL3_image 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .
влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .	Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .	Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .	Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .

@ManyLives 0 / 0 / 0 Регистрация: 15.10.2012 Сообщений: 16
	12.09.2013, 19:59 [ТС]
	Exeil, Спасибо! А есть вариант (попроще) так сказать попонятнее для новичков? 0

@ManyLives 0 / 0 / 0 Регистрация: 15.10.2012 Сообщений: 16
	13.09.2013, 14:02 [ТС]
	Exeil, Огромное спасибо! Комментарии помогли. Тема закрыта. 0