Последние новости:

Поиск по сайту:

За горою у реки жили-были дураки (С. Маршак).

onClick в JavaScript1 мин для чтения

FavoriteLoadingДобавить в избранное
05.11.2020
onClick в JavaScript

JavaScript — хорошо известный язык программирования. Он используется более чем на 95% веб-сайтов, с которыми мы взаимодействуем ежедневно. Часто можно увидеть, что при нажатии кнопки изменяется вся страница, открывается поле формы или появляется всплывающее окно. С точки зрения программиста/разработчика, как мы можем реализовать такую ​​функциональность и управлять взаимодействием веб-сайта с пользователями? Когда дело доходит до взаимодействия, JavaScript предоставляет встроенные функции для управления событиями на сайте.

В JavaScript есть два типа событий:

  • Event Listener — слушает и ждет, пока событие не будет запущено
  • Event Handler — выполняется, когда событие запускается

В этой статье вы узнаете о наиболее часто используемом обработчике событий JavaScript — событии onClick. Существуют и другие обработчики событий для наведения курсора на элемент или нажатия клавиш клавиатуры, но в этой статье мы сосредоточимся на событии onClick.

Событие onClick используется для выполнения определенных задач одним нажатием кнопки или путем взаимодействия с элементом HTML.

Теперь мы покажем вам пример, чтобы продемонстрировать, как работает событие onClick.

 

Пример: изменение текста с помощью onClick

В этом примере мы изменим выделение текста одним нажатием кнопки с помощью события onClick. Сначала мы создадим тег абзаца и дадим ему идентификатор абзаца для доступа к нему позже. Мы создадим кнопку с событием onClick и вызовем функцию с именем «Изменить».

<p id=»paragraph»>AndreyEx</p> <button onclick=»change()»>Изменить!</button>

 

В файле сценария мы создадим переменную флага, которая позволит нам проверять статус текста в нашем теге абзаца HTML. Затем мы напишем функцию, определяющую функцию «изменения». В определении функции мы создадим оператор «if», в котором мы будем проверять статус с помощью переменной flag. Мы также изменим текст и поменяем флаг. Это довольно простой фрагмент кода!
<>

Читать  Для чего применяют машинное обучение в разработке мобильных приложений для бизнеса

var a = 1;

function change(){
if (a==1) {
document.getElementById(«paragraph»).innerHTML = «AndreyEx крут»
a = 0;
} else {
document.getElementById(«paragraph»).innerHTML = «AndreyEx»
a = 1;
}
}

</>
Все! После написания всего этого кода мы запустим код, перейдем в наш браузер и нажмем только что созданную кнопку. После нажатия кнопки текст должен быть изменен с «AndreyEx» на «AndreyEx крут».

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

 

Вывод

В этой статье объясняется, как использовать событие onClick. В этой статье вы познакомились с концепцией функции onClick на практике. Использование события onClick настолько простое, что даже новичок может начать работать с этой функцией. Вы можете продолжить обучение, работать и получить больше опыта в JavaScript на сайте AndreyEx.com, чтобы лучше понять этот язык программирования. Спасибо огромное!

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (1 оценок, среднее: 5,00 из 5)
Загрузка...
Поделиться в соц. сетях:

0 0 голоса
Рейтинг статьи
Подписаться
Уведомить о
guest

**ссылки nofollow

0 комментариев
Межтекстовые Отзывы
Посмотреть все комментарии

Это может быть вам интересно

Статьи партнеров:

Рекомендуемое
Odoo - это самое популярное универсальное программное обеспечение для бизнеса…
0
Оставьте комментарий! Напишите, что думаете по поводу статьи.x

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам:

Заполните форму и наш менеджер перезвонит Вам в самое ближайшее время!

badge
Обратный звонок 1
Отправить

Спасибо! Ваша заявка принята

close

Спасибо! Ваша заявка принята

close