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

Из ничего ничто не возникает (Мелисс).

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

FavoriteLoadingДобавить в избранное
1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (1 оценок, среднее: 5,00 из 5)
Загрузка...
5 ноября 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 крут».

Читать  8 методов, которые помогают нам (по-настоящему) читать чужой код

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

 

Вывод

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


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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Читайте также

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

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

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

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

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

close
galka

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

close
Яндекс.Метрика