Заменить addEventListener

@spiegel · Регистрация: 26.05.2016

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

Подскажите пожалуйста, чем заменить addEventListener что бы функция заработала?

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
window.onload = function () {
            var a, b, result, btn;
            a = parseInt(document.getElementById('one').value);
            b = parseInt(document.getElementById('two').value);
            btn = document.querySelector('.button');
 
        btn.addEventListener('click', function () {
                    if (a > 0) {
                result = a - b;
            }
            else {
                result = a + b;
            }
        
        document.getElementById('result').innerHTML = result; 
           });
 
};

@BANO · 20.06.2016, 21:14

spiegel, может onclick?

@spiegel · 20.06.2016, 21:15 **[ТС]**

Может )
просто я умею его вставлять только в html.
А как в js вставить не знаю.

@BANO · 20.06.2016, 21:18

spiegel, ну, у меня возникает вопрос чем вам этот метод не угодил

JavaScript
1
2
3
btn.onclick = function () {
    document.getElementById('result').innerHTML = a > 0 ? a - b : a + b;
}

@ntlinuxnt · 20.06.2016, 21:37

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

ну, у меня возникает вопрос чем вам этот метод не угодил

Что серьезно так можно было? То есть и onmouseover точно так же? И многое другое? Тогда зачем вообще нужен addEventListener?

@spiegel · 20.06.2016, 21:38 **[ТС]**

Спасибо )
Меня то он устраивает ) я просто изучаю js и хочется понять что можно через него делать, а что нет..
И не знаю насколько правильно вставлять onclick в html код )

@BANO · 20.06.2016, 21:59

ntlinuxnt, за тем, что с помощью addEventListener можно навесить неограниченное количество обработчиков, а с помощью свойства только 1

@ntlinuxnt · 21.06.2016, 02:32

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

за тем, что с помощью addEventListener можно навесить неограниченное количество обработчиков, а с помощью свойства только 1

то есть я могу прикрепить на клик две разных функции с помощью addEventListener, и они не будут себя переопределять?

@kalabuni · 21.06.2016, 09:23

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

то есть я могу прикрепить на клик две разных функции с помощью addEventListener, и они не будут себя переопределять?

эх, знать бы ещё, что вы понимаете под "переопределять", то можно было бы вам помочь более конкретным ответом на ваш вопрос

А покуда в общем виде пример "на пальцах"

итак, если записать:
Element.onclick = func1;
Element.onclick = func2;
то при клике по элементу исполнится только функция func2 ()

а вот если записать:
Element.addEventListener('click', func1, false);
Element.addEventListener('click', func2, false);
то при клике по элементу исполнится сначала функция func1 () , а затем исполнится функция func2 ()

@ntlinuxnt · 21.06.2016, 14:33

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

эх, знать бы ещё, что вы понимаете под "переопределять", то можно было бы вам помочь более конкретным ответом на ваш вопрос
А покуда в общем виде пример "на пальцах"
итак, если записать:
Element.onclick = func1;
Element.onclick = func2;
то при клике по элементу исполнится только функция func2 ()
а вот если записать:
Element.addEventListener('click', func1, false);
Element.addEventListener('click', func2, false);
то при клике по элементу исполнится сначала функция func1 () , а затем исполнится функция func2 ()

Ну я так и понял, спасибо)

@spiegel · 21.06.2016, 17:51 **[ТС]**

Подскажите пожалуйста в чем ошибка

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
window.onload = function () {
var a, b, c, result, agreement, btn1;
            a = parseInt(document.getElementById('tab1').value);
            b = parseInt(document.getElementById('tab2').value);
            c = parseInt(document.getElementById('tab3').value);
            agreement = document.getElementById('tab4').checked;
            btn1 = document.querySelector('.button1');
 
btn1.onclick = function () {
    if (agreement == false) {
        result = a + b + c;
    }
    else {
        result = a + b - c;
    }
    document.getElementById('result').innerHTML = result + ' руб.';
    
};
};

@Raisin Zn · 21.06.2016, 17:56

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

Подскажите пожалуйста в чем ошибка

А что не так с кодом?

@spiegel · 21.06.2016, 18:13 **[ТС]**

Выдает ответ:
NaN руб.

@BANO · 21.06.2016, 21:19

Не по теме:

ntlinuxnt, оверквотингом пожалуйста не занимаемся
пункт 5.17 правил форума

@sad67man · 22.06.2016, 15:43

spiegel, parseInt из пустой строки возвращает NaN. Фикс:

JavaScript
1
2
3
a = parseInt(document.getElementById('tab1').value)||0;
b = parseInt(document.getElementById('tab2').value)||0;
c = parseInt(document.getElementById('tab3').value)||0;

@dzendev · 22.06.2016, 22:42

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

spiegel, parseInt из пустой строки возвращает NaN. Фикс:

То есть, если пользователь введёт в первое поле значение "х*й", во второе "длиной", а в третье "30см", то результат будет "30 руб"

?

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
          window.onload = function () {
           var a = document.getElementById('tab1'),
                b = document.getElementById('tab2'),
                c = document.getElementById('tab3'),
                agreement = document.getElementById('tab4'),
                result = document.getElementById('result'),
                btn1 = document.querySelector('.button1');
 
            btn1.onclick = function () {
                var aVal = parseInt(a.value, 10),
                         bVal = parseInt(b.value, 10),
                         cVal = parseInt(c.value, 10),
                         agreementVal = agreement.checked,
                         price = 0;
 
                    a.style.border = "1px solid black";
                    b.style.border = "1px solid black";
                    c.style.border = "1px solid black";
 
                    if(isNaN(aVal)){
                    a.style.border = "1px solid red";
                    result.innerHTML = 'Введите число';
                    return false;
                    }
                    if(isNaN(bVal)){
                    b.style.border = "1px solid red";
                    result.innerHTML = 'Введите число';
                    return false;
                    }
                    if(isNaN(cVal)){
                    c.style.border = "1px solid red";
                    result.innerHTML = 'Введите число';
                    return false;
                    }
 
                if (agreementVal == false) {
                    price = aVal + bVal + cVal;
                }
                else {
                    price = aVal + bVal - cVal;
                }
 
                result.innerHTML = price + ' руб.';
              };
        };

Новые блоги и статьи Все статьи Все блоги /
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(), которая. . .

@BANO Ренегат 1740 / 1085 / 386 Регистрация: 06.08.2014 Сообщений: 5,203 Записей в блоге: 1
	20.06.2016, 21:14
	spiegel, может onclick? 0

@spiegel -10 / 2 / 0 Регистрация: 26.05.2016 Сообщений: 89
	20.06.2016, 21:15 [ТС]
	Может ) просто я умею его вставлять только в html. А как в js вставить не знаю. 0

@spiegel -10 / 2 / 0 Регистрация: 26.05.2016 Сообщений: 89
	20.06.2016, 21:38 [ТС]
	Спасибо ) Меня то он устраивает ) я просто изучаю js и хочется понять что можно через него делать, а что нет.. И не знаю насколько правильно вставлять onclick в html код ) 0

@BANO Ренегат 1740 / 1085 / 386 Регистрация: 06.08.2014 Сообщений: 5,203 Записей в блоге: 1
	20.06.2016, 21:59
	ntlinuxnt, за тем, что с помощью addEventListener можно навесить неограниченное количество обработчиков, а с помощью свойства только 1 0

@spiegel -10 / 2 / 0 Регистрация: 26.05.2016 Сообщений: 89
	21.06.2016, 18:13 [ТС]
	Выдает ответ: NaN руб. 0

@BANO
	21.06.2016, 21:19
	Не по теме: ntlinuxnt, оверквотингом пожалуйста не занимаемся пункт 5.17 правил форума 0