Как применить обработчик событий

@Дмитрий Дмитрий · Регистрация: 17.09.2016

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

Такая ситуация, есть три кнопки и три скрытых области и кнопка Расчет, каждая область выполняет определенные функции прописанные только для этой области, т.е. при нажатии кнопки 1 появляется область 1 с определенными функциями 1, при нажатии кнопки 2 появляется область 2 с определенными функциями 2, а область 1 исчезает и т.д. но есть кнопка Расчета, она одна для всех областей т.е. нажали кнопку 1 появилась область 1, нажали кнопку Расчет получили значение области 1; нажали кнопку 2, область 1 скрылась появилась область 2, нажали кнопку Расчет получили результат области 2 и т.д.
Можно конечно в каждой области сделать кнопку Расчет и вывода результата, но как то это не эстетично, к то муже кнопка Расчет и поле вывода результата они постоянны, а скрытые области имеют разные параметры.
Я понимаю так, все это делается через addEventListener и removeEventListener?
Если можно показать пример реализации?

@mrtoxas · 14.10.2016, 20:42

JavaScript
1
2
3
4
5
6
7
8
9
10
11
var btn = document.getElementById("btn");
btn.addEventListener('click',funcOne, false);
 
function funcOne(){
  alert('1')
  btn.removeEventListener('click',funcOne, false);
  btn.addEventListener('click',funcTwo, false);
}
function funcTwo(){
  alert('2')
}

Это пример addEventListener и removeEventListener. А насчет всего остального ничего не понятно.

@Дмитрий Дмитрий · 15.10.2016, 06:09 **[ТС]**

При нажатии на кнопку btn1 вызываются функции funcOne, functwo, кнопка btnrezult выполняет функции funcOne, functwo с выводом результата в поле rezult. При нажатии на кнопку btn2 вызываются функции functhree, funcfour а функции funcOne, functwo, вызванные btn1 блокируются, при нажатии на btnrezult выполняются функции functhree, funcfour, а результат работы функций functhree, funcfour выводится в поле rezult ит.д.
Т.е. кнопки btn1, btn2 вызывают функции, а кнопка btnrezult выполняет их и выводит значения в поле rezult. Каждая кнопка btn1, btn2 вызывает только свои функции т.е. btn1 вызывает функции funcOne, functwo; btn2 вызывает functhree, funcfour. Кнопка btnrezult выполняет только вызванные функции.

@mrtoxas · 15.10.2016, 09:13

Не по теме:

какая жесть =-O

@Дмитрий Дмитрий · 15.10.2016, 11:18 **[ТС]**

Почему?

@kalabuni · 15.10.2016, 16:20

Сообщение от Дмитрий Дмитрий

Почему?

"жесть" потому что вы, вместо объяснения вашей задачи простым человеческим языком, зачем-то пытаетесь "умничать" -- и в итоге вашу задачу никто не понимает и, соответственно, не может вам помочь, даже если и очень хочет это сделать

@Дмитрий Дмитрий · 15.10.2016, 16:22 **[ТС]**

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

"жесть" потому что вы, вместо объяснения вашей задачи простым человеческим языком, зачем-то пытаетесь "умничать" -- и в итоге вашу задачу никто не понимает и, соответственно, не может вам помочь, даже если и очень хочет это сделать

Блин, не распишешь плохо, распишешь то же плохо, вам не угодишь.
Я не умничаю, что бы умничать надо разбираться как вы, а мне далеко до этого.

@kalabuni · 15.10.2016, 20:25

начните с полного описания того, что пользователь изначально видит на странице (именно видит, и именно глазами -- т.е. речь ваша должна идти не о идентификаторах кнопок и не о названиях функций, с ними связанных, а о надписях на кнопках и о тех областях, которые видны пользователю -- о "скрытых" областях ничего пока писать не надо, потому что их изначально не видно, так ведь?)

продолжите своё описание тем, что пользователь увидит на странице , когда нажмёт на ту или иную кнопку (вот тут уже нужно как раз рассказать о том, что и где из "скрытого" станет видимым и наоборот)

Сообщение от Дмитрий Дмитрий

Я понимаю так, все это делается через addEventListener и removeEventListener?

неправильно понимаете: addEventListener () и removeEventListener () -- это методы, позволяющие наделить те или иные события на тех или иных объектах какой-то конкретной функциональностью и затем отменить ранее назначенную функциональность... при этом существуют и иные способы сделать то, что описано выше, без использования двух этих методов

т.е. на странице, например, имеется кнопка (в HTML-коде прописанная как <input type="button" value="нажми меня">)

нажать на эту кнопку пользователь, конечно, может, но никакого результата от нажатия пользователь иметь не будет, потому что кнопка не наделена никакой функциональностью

можно прописать функциональность кнопки прямо в HTML-коде, вот так: <input type="button" value="нажми меня" onclick="alert (''hello!)">, и тогда пользователь, нажав кнопку, увидит модальное окошко с приветствием

но можно и не "замусоривать" HTML-код яваскриптом и прописать эту же функциональность в скриптовом блоке, используя первый из упомянутых вами методов

JavaScript
1
2
3
4
onload = function ()
    {
    document.querySelector ('input[value="нажми меня"]').addEventListener ('click', function (){alert ('Hello!')}, false);
    }

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

@Дмитрий Дмитрий 1 / 1 / 2 Регистрация: 17.09.2016 Сообщений: 450

	Как применить обработчик событий 14.10.2016, 16:46. Показов 764. Ответов 7 Метки нет (Все метки) Такая ситуация, есть три кнопки и три скрытых области и кнопка Расчет, каждая область выполняет определенные функции прописанные только для этой области, т.е. при нажатии кнопки 1 появляется область 1 с определенными функциями 1, при нажатии кнопки 2 появляется область 2 с определенными функциями 2, а область 1 исчезает и т.д. но есть кнопка Расчета, она одна для всех областей т.е. нажали кнопку 1 появилась область 1, нажали кнопку Расчет получили значение области 1; нажали кнопку 2, область 1 скрылась появилась область 2, нажали кнопку Расчет получили результат области 2 и т.д. Можно конечно в каждой области сделать кнопку Расчет и вывода результата, но как то это не эстетично, к то муже кнопка Расчет и поле вывода результата они постоянны, а скрытые области имеют разные параметры. Я понимаю так, все это делается через addEventListener и removeEventListener? Если можно показать пример реализации? 0

@Дмитрий Дмитрий 1 / 1 / 2 Регистрация: 17.09.2016 Сообщений: 450
	15.10.2016, 06:09 [ТС]
	При нажатии на кнопку btn1 вызываются функции funcOne, functwo, кнопка btnrezult выполняет функции funcOne, functwo с выводом результата в поле rezult. При нажатии на кнопку btn2 вызываются функции functhree, funcfour а функции funcOne, functwo, вызванные btn1 блокируются, при нажатии на btnrezult выполняются функции functhree, funcfour, а результат работы функций functhree, funcfour выводится в поле rezult ит.д. Т.е. кнопки btn1, btn2 вызывают функции, а кнопка btnrezult выполняет их и выводит значения в поле rezult. Каждая кнопка btn1, btn2 вызывает только свои функции т.е. btn1 вызывает функции funcOne, functwo; btn2 вызывает functhree, funcfour. Кнопка btnrezult выполняет только вызванные функции. 0

@mrtoxas
	15.10.2016, 09:13
	Не по теме: какая жесть =-O 0

@Дмитрий Дмитрий 1 / 1 / 2 Регистрация: 17.09.2016 Сообщений: 450
	15.10.2016, 11:18 [ТС]
	Почему? 0

Опции темы