Калькулятор через addEventListener

@14nastya95 · Регистрация: 14.10.2017

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

Пыталась сделать калькулятор, привожу код ниже. Хочу чтоб результат выводился в спан Результат. Проблема в том, что не знаю как сделать переменную result глобальной(она подсчитывается в зависимости от условия в функции myFunc, на которой висит событие. А сама эта переменная используется у меня уже в другой функции( срабатывает при нажатии кнопки count(подсчет). И короче ошибка что не видит result

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
<head>
    <title>Calculator_2</title>
    <meta charset="utf-8">
    <link href='calcul_v2.css' rel=stylesheet type=text/css> 
   
</head>
 
<body>
    <div class='wrap'>
        <div class='enter'>
            <label for='pole_1'>number 1
                <input type='text' id='pole_1'>
            </label>
            <label for='pole_2'>operation 2
                <select>
                    <option value="+">+</option>
                    <option value="-" selected>-</option>
                    <option value="*">*</option>
                    <option value="/">/</option>
                </select>
            </label>
            <label for='pole_3'>number 2
                <input type='text' id='pole_3'>
            </label>
        </div>
        <div class='res'>
            <span>Результат: </span>
        </div>
        <div class='myResult'>
            <input type="button" value='count' id='myButton'>
        </div>
    </div>

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
 var a = document.getElementById('pole_1');//нашли первое поле для ввода и записали его в переменную a
        var b = document.getElementById('pole_3');//нашли второе поле для ввода и записали его в переменную b
   
        function myFunc(e) { //функция для выбора действия и подсчета 
            val = e.currentTarget.value;
            if (val == '-') {
                 result = a.value - b.value;
            } 
            else if (val == '+') {
              result = Number(a.value) + Number(b.value)
            }
            else if (val == '*') {
                result = (a.value * b.value)
            }
            else if (val == '/') {
             result = (a.value / b.value)
            }
        }
        var mySpan = document.getElementsByTagName('span')
 
        function funcCount() { //функция для нажатия кнопки count и вывода в спан полученного значения
            var mySpan = document.getElementsByTagName('span');//нашли спан в который выведем наш результат
            mySpan.innerHTML = 'Результат' + result;
 
        }
        var operations = document.getElementsByTagName('select');//нашли наш селект
            operations[0].addEventListener('click', myFunc); //повесили событие на него
        
 
        var myCount = document.getElementById('myButton');//нашли нашу кнопку count
        myCount.addEventListener('click', funcCount);//повесили на нее событие

@klopp · 11.10.2018, 14:06

чтобы переменная была глобальной, ее нужно объявить выше всех функций.

@Evgen1337 · 11.10.2018, 14:30

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
<html>
 
<head>
  <title>Calculator_2</title>
  <meta charset="utf-8" />
  <link href='calcul_v2.css' rel=stylesheet type=text/css />
</head>
 
<body>
  <div class='wrap'>
    <div class='enter'>
      <label for='pole_1'>number 1
        <input type='text' id='pole_1'>
      </label>
      <label for='pole_2'>operation 2
        <select id="operation">
          <option value="+">+</option>
          <option value="-" selected>-</option>
          <option value="*">*</option>
          <option value="/">/</option>
        </select>
      </label>
      <label for='pole_3'>number 2
        <input type='text' id='pole_3'>
      </label>
    </div>
    <div id="result">Результат:</div>
    <div class='myResult'>
      <input type="button" value='count' id='myButton'>
    </div>
  </div>
  <script>
    var operation = document.getElementById('operation')
 
    document.getElementById('myButton').addEventListener('click', function () {
      var result = 0
      var operator = operation.options[operation.options.selectedIndex].value
      var _a = parseInt(document.getElementById('pole_1').value)
      var _b = parseInt(document.getElementById('pole_3').value)
 
      if (operator == '-') result = _a - _b;
      else if (operator == '+') result = _a + _b
      else if (operator == '*') result = _a * _b
      else if (operator == '/') result = _a / _b
 
      console.log(result)
 
      document.getElementById('result').innerHTML = 'Результат:' + result
    })
  </script>
</body>
 
</html>

Добавлено через 2 минуты
при смене дропдауна %)

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
<html>
 
<head>
  <title>Calculator_2</title>
  <meta charset="utf-8" />
  <link href='calcul_v2.css' rel=stylesheet type=text/css />
</head>
 
<body>
  <div class='wrap'>
    <div class='enter'>
      <label for='pole_1'>number 1
        <input type='text' id='pole_1'>
      </label>
      <label for='pole_2'>operation 2
        <select id="operation">
          <option value="+">+</option>
          <option value="-" selected>-</option>
          <option value="*">*</option>
          <option value="/">/</option>
        </select>
      </label>
      <label for='pole_3'>number 2
        <input type='text' id='pole_3'>
      </label>
    </div>
    <div id="result">Результат:</div>
    <div class='myResult'>
      <input type="button" value='count' id='myButton'>
    </div>
  </div>
  <script>
    var operation = document.getElementById('operation')
 
    operation.addEventListener('change', function() {
      calculate()
    })
 
    document.getElementById('myButton').addEventListener('click', function () {
      calculate()
    })
 
    calculate = () => {
      var result = 0
      var operator = operation.options[operation.options.selectedIndex].value
      var _a = parseInt(document.getElementById('pole_1').value)
      var _b = parseInt(document.getElementById('pole_3').value)
 
      if (operator == '-') result = _a - _b;
      else if (operator == '+') result = _a + _b
      else if (operator == '*') result = _a * _b
      else if (operator == '/') result = _a / _b
 
      console.log(result)
 
      document.getElementById('result').innerHTML = 'Результат:' + result
    }
  </script>
</body>
 
</html>

Добавлено через 5 минут
Вызов ф-ции при вводе в поля или изменении оператора

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
<html>
 
<head>
  <title>Calculator_2</title>
  <meta charset="utf-8" />
  <link href='calcul_v2.css' rel=stylesheet type=text/css />
</head>
 
<body>
  <div class='wrap'>
    <div class='enter'>
      <label for='pole_1'>number 1
        <input type='text' id='pole_1'>
      </label>
      <label for='pole_2'>operation 2
        <select id="operation">
          <option value="+">+</option>
          <option value="-" selected>-</option>
          <option value="*">*</option>
          <option value="/">/</option>
        </select>
      </label>
      <label for='pole_3'>number 2
        <input type='text' id='pole_3'>
      </label>
    </div>
    <div id="result">Результат:</div>
    <div class='myResult'>
      <input type="button" value='count' id='myButton'>
    </div>
  </div>
  <script>
    var a = document.getElementById('pole_1')
    var b = document.getElementById('pole_3')
    var operation = document.getElementById('operation')
    operation.addEventListener('change', this.calculate)
 
    a.addEventListener('input', this.calculate)
    b.addEventListener('input', this.calculate)
 
    document.getElementById('myButton').addEventListener('click', this.calculate)
 
    function calculate() {
      var operator = operation.options[operation.options.selectedIndex].value
      var _a = parseInt(a.value)
      var _b = parseInt(b.value)
 
      if (operator == '-') setHTML(_a - _b)
      else if (operator == '+') setHTML(_a + _b)
      else if (operator == '*') setHTML(_a * _b)
      else if (operator == '/') setHTML(_a / _b)
    }
 
    function setHTML(result) {
      document.getElementById('result').innerHTML = 'Результат:' + result
    }
  </script>
</body>
 
</html>

@14nastya95 · 11.10.2018, 14:52 **[ТС]**

всем спасибо!!разобралась))

@amr-now · 11.10.2018, 16:11

14nastya95, первый раз вижу калькулятор с ручным переключением коробки передач. Можно добавить ещё пару рычажков и тумблеров для запуска процесса вычисления.

Для старта надо было закрыть пару ошибок:
1) в глобальной области видимости надо

JavaScript
1
 var result;

2)

JavaScript
1
            var mySpan = document.getElementsByTagName('span')[0];//нашли спан в который выведем наш результат

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Работа со звуком через SDL3_mixer 8Observer8 08.02.2026 Содержание блога Пошагово создадим проект для загрузки звукового файла и воспроизведения звука с помощью библиотеки SDL3_mixer. Звук будет воспроизводиться по клику мышки по холсту на Desktop и по. . .	SDL3 для Web (WebAssembly): Основы отладки веб-приложений на SDL3 по USB и Wi-Fi, запущенных в браузере мобильных устройств 8Observer8 07.02.2026 Содержание блога Браузер Chrome имеет средства для отладки мобильных веб-приложений по USB. В этой пошаговой инструкции ограничимся работой с консолью. Вывод в консоль - это часть процесса. . .	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 была полностью переписана на Си, в. . .

@klopp 566 / 465 / 183 Регистрация: 14.10.2017 Сообщений: 1,259
	11.10.2018, 14:06
	чтобы переменная была глобальной, ее нужно объявить выше всех функций. 0

@14nastya95 0 / 0 / 0 Регистрация: 14.10.2017 Сообщений: 34
	11.10.2018, 14:52 [ТС]
	всем спасибо!!разобралась)) 0