Вступ
JavaScript - це добре відома мова програмування. Він використовується на понад 95% веб-сайтів, з якими ми щодня взаємодіємо. Часто можна побачити, що при натисканні кнопки змінюється ціла сторінка, відкривається поле форми або з’являється спливаюче вікно. З точки зору програміста / розробника, як ми можемо реалізувати таку функціональність та керувати взаємодією веб-сайту з користувачами?? Що стосується взаємодії, JavaScript надає вбудовані функції для управління подіями на сайті.
У JavaScript існує два типи подій:
- Слухач подій - слухає і чекає звільнення події
- Обробник подій - виконується, коли подія запускається
У цій статті ви дізнаєтеся про найбільш часто використовуваний обробник подій JavaScript, onClick подія. Є й інші обробники подій для наведення курсора на елемент або для натискання клавіш клавіатури, але в цій статті ми зупинимося на події onClick.
Подія onClick використовується для виконання певних завдань натисканням кнопки або взаємодією з елементом HTML.
Зараз ми покажемо вам приклад, щоб продемонструвати, як працює подія onClick.
Приклад: Змінення тексту за допомогою onClick
У цьому прикладі ми змінимо виділений текст натисканням кнопки за допомогою події onClick. По-перше, ми створимо тег абзацу та надамо йому ідентифікатор „абзац”, щоб пізніше отримати до нього доступ. Ми створимо кнопку з подією onClick і викликаємо функцію з назвою «змінити»."
Linuxhint
У файлі сценарію ми створимо змінну прапора, яка дозволить нам перевірити статус тексту в нашому тегу абзацу HTML. Потім ми напишемо функцію, що визначає функцію “зміни”. У визначенні функції ми створимо оператор “if”, в якому перевіримо статус за допомогою змінної прапора. Ми також змінимо текст і змінимо прапор. Це досить простий шматок коду!
var a = 1;зміна функції ()
якщо (a == 1)
документа.getElementById ("абзац").innerHTML = "Підказка Linux чудова"
a = 0;
ще
документа.getElementById ("абзац").innerHTML = "Підказка Linux"
a = 1;
Гаразд! Після написання всього цього коду ми запустимо його, перейдемо до нашого браузера та натисніть на щойно створену кнопку. Після натискання кнопки текст слід змінити з «Linuxhint» на «Linuxhint awesome."
Ми можемо застосувати ту саму техніку де завгодно, щоб змінити вміст нашого веб-сайту відповідно до наших потреб. Ми можемо використовувати його для зміни зображення або виконання будь-якого типу завдання, яке ми можемо уявити за допомогою цього інструменту.
Висновок
У цій статті пояснюється, як використовувати подію onClick. У цій статті ви на практиці вивчили поняття функції onClick. Використання події onClick настільки просто, що навіть новачок може почати працювати з цією функцією. Ви можете продовжувати вивчати, працювати та отримувати більше досвіду роботи з JavaScript на linuxhint.com, щоб краще зрозуміти цю мову програмування. Дуже дякую!