Пишу свой калькулятор

@Bohdan150 · Регистрация: 14.07.2014

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

Здравствуйте, сразу хочу написать, что только изучаю JavaScript, поэтому прошу быть в меру снисходительными к моему коду=)(на сколько это возможно)

В общем, накидал я пару строк, чтоб делать элементарные арифметические операции, и все вроде было ок, пока я не добавил кнопочку сброса калькулятора, и тут понеслось... По неизведанным мне причинам, он перестал считать, пока не обновишь страницу с заполненными полями. То-есть, вводишь в поля данные, после обновляешь страницу и только тогда нажимаешь на операцию(+,-,*,/) и считаешь... только так он работает, если же вводишь данные и сразу пытаешься посчитать, то выводит "0".
Далле, когда срабатывает эта же кнопка сброса строк, то она очищает содержимое строки и DIV-a, но данные остаются, то-есть после очистки, нажимаешь опять на "Результат" и он считает так буд-то ничего и не очищалось(хотя значения пустые)...
Вроде пока все

Помогите кому не лень, а то все перегуглил, и хочется двигаться дальше, но и обидно, что не разобрался с этой вроде как ерундой...
Вот код:

PHP/HTML
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
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
<body>
<input type="text" id = 'summand_1'><br>
<input type="text" id = 'summand_2'><br>
<span><input type="radio" name="option" value="1" id = 'ra1' onclick="ilkHomTh(this.value);">+</span>
<span><input type="radio" name="option" value="2" id = 'ra2' onclick="ilkHomTh(this.value);">-</span>
<span><input type="radio" name="option" value="3" id = 'ra3' onclick="ilkHomTh(this.value);">*</span>
<span><input type="radio" name="option" value="4" id = 'ra4' onclick="ilkHomTh(this.value);">/<br></span>
<input type="button" id = "result_form" value="Результат">
<div id = "res_out"></div>
<input type="button" id = "clear_res" value="C">
<style>
    body{
        background-color: #858585;
    }
    #clear_res{
        width: 90px;
        height: 25px;
        background-color: #455445;
        border: none;
    }
 
 
    #clear_res:hover{
        background-color: #557555;
    }
 
    #res_out{
        text-align: center;
        border: 1px solid #447288;
        width: 80px;
        height: 24px;
        background-color: #747288;
        margin-left: 120px;
        margin-top: -46px;
    }
    input{
        margin-top: 7px;
        margin-left: 20px;
    }
 
    #result_form{
        margin: 20px;
        width: 90px;
        height: 25px;
        background-color: #455445;
        border: none;
    }
    #result_form:hover{
        background-color: #557555;
    }
    </style>
  <script>
 
  var summ_1 = document.getElementById("summand_1").value;
  var summ_2 = document.getElementById("summand_2").value;
  var result = document.getElementById("result_form");
  var res = document.getElementById("res_out");
  var sum;
  summ_1 = Number(summ_1);
  summ_2 = Number(summ_2);
 
  function ilkHomTh(stayType){
    if(stayType == '1'){
        result.onclick = function(){
            sum = summ_1 + summ_2;
            res.innerHTML = sum;
        }
    }if(stayType == '2'){
        result.onclick = function(){
            sum = summ_1 - summ_2;
             res.innerHTML = sum;
        }
    }if(stayType == '3'){
        result.onclick = function(){
            sum = summ_1 * summ_2;
             res.innerHTML = sum;
        }
    }if(stayType == '4'){
        result.onclick = function(){
            sum = summ_1 / summ_2;
             res.innerHTML = sum;
                }
            }
  clear_res.onclick = function(){
        document.getElementById("result_form").value = "";
        document.getElementById("res_out").innerHTML = "";
        document.getElementById("summand_1").value = "";
        document.getElementById("summand_2").value = "";
        }
        
}
     
  </script>
</body>

@vettel · 13.11.2016, 11:19

Bohdan150,
Элементарно, Ватсон. У вас как минимум 2 грубейшие архитектурные ошибки.
Вы отладкой кода занимались вообще? Элементарно хотя бы вывести значения в консоль с помощью console.log() и посмотреть, какие у вас операнды в каждый момент времени.

Первая:

JavaScript
1
2
3
4
5
6
7
var summ_1 = document.getElementById("summand_1").value;
  var summ_2 = document.getElementById("summand_2").value;
  var result = document.getElementById("result_form");
  var res = document.getElementById("res_out");
  var sum;
  summ_1 = Number(summ_1);
  summ_2 = Number(summ_2);

Этот код выполняется не по клику, а сразу после того, как браузер до него дойдет. А теперь подумайте, какие значения там будут.
Вторую ошибку найдете сами. Подскажу: она связана с обработчиком события (по какому конкретно событию запускается ф-я и правильно ли это?). Но для начала разберитесь с первой.

@velikashkin · 13.11.2016, 13:14

Как один из вариантов:

PHP/HTML
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
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
<body>
<input type="number" value="0" id="summand_1"><br>
<input type="number" value="0" id="summand_2"><br>
<span><input type="radio" name="option" value="1" id="ra1">+</span>
<span><input type="radio" name="option" value="2" id="ra2">-</span>
<span><input type="radio" name="option" value="3" id="ra3">*</span>
<span><input type="radio" name="option" value="4" id="ra4">/</span>
<br>
<input type="button" id="result_form" value="Результат" onclick="resultat();">
<div id="res_out"></div>
<input type="button" id="clear_res" value="C" onclick="clears_all();">
<style>
    body{
        background-color: #858585;
    }
    #clear_res{
        width: 90px;
        height: 25px;
        background-color: #455445;
        border: none;
    }
 
 
    #clear_res:hover{
        background-color: #557555;
    }
 
    #res_out{
        text-align: center;
        border: 1px solid #447288;
        width: 80px;
        height: 24px;
        background-color: #747288;
        margin-left: 120px;
        margin-top: -46px;
    }
    input{
        margin-top: 7px;
        margin-left: 20px;
    }
 
    #result_form{
        margin: 20px;
        width: 90px;
        height: 25px;
        background-color: #455445;
        border: none;
    }
    #result_form:hover{
        background-color: #557555;
    }
    </style>
  <script>
   
  var res = document.getElementById("res_out");
  var sum = 0;
 
  function resultat(){
    var summ_1 = +document.getElementById("summand_1").value;
    var summ_2 = +document.getElementById("summand_2").value;
    var operand = document.getElementsByName("option");
    if (operand[0].checked){
        sum = summ_1 + summ_2;
        res.innerHTML = sum;
    }
    if (operand[1].checked){
        sum = summ_1 - summ_2;
        res.innerHTML = sum;
    }
    if (operand[2].checked){
        sum = summ_1 * summ_2;
        res.innerHTML = sum;
    }
    if (operand[3].checked){
        if (summ_2 != 0){ //проверяем на 0, на 0 делить нельзя
            sum = summ_1 / summ_2;
            res.innerHTML = sum.toFixed(2); //округляем результат до сотых после запятой
        } else res.innerHTML = 'Error!'; //если 0, то ошибка
    } else if (!operand[0].checked && !operand[1].checked && !operand[2].checked && !operand[3].checked)
        res.innerHTML = 'Err!';
  }
    function clears_all(){
        document.getElementById("res_out").innerHTML = "";
        document.getElementById("summand_1").value = 0;
        document.getElementById("summand_2").value = 0;
    }
     
  </script>
</body>

@Bohdan150 · 17.11.2016, 02:20 **[ТС]**

Спасибо большое за быстрые ответы, выручили

Сколько ж еще учить

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .

Пишу свой калькулятор

Решение

Решение

@Bohdan150 0 / 0 / 0 Регистрация: 14.07.2014 Сообщений: 12
	17.11.2016, 02:20 [ТС]
	Спасибо большое за быстрые ответы, выручили Сколько ж еще учить 0