- Како укључити дугме у ЈаваСцрипт-у?
- Пример 1: Измена текстуалних порука преклапањем дугмета
- Пример 2: Укључивање/искључивање дугмета у ЈаваСцрипт-у
Како укључити дугме у ЈаваСцрипт-у?
Условна изјава је основни захтев за пребацивање дугмета у ЈаваСцрипт-у. Да бисте то постигли, потребно је да добијете елемент, а затим примените неку прилагођену функцију да примените неку специфичну операцију на тај елемент. Функција је повезана са догађајем онцлицк дугмета. Тако да, кад год се кликне на дугме, та функција ће бити извршена. Хајде да вежбамо неке примере за пребацивање дугмета у ЈаваСцрипт-у.
Пример 1: Измена текстуалних порука преклапањем дугмета
Сматра се да је пример измене поруке пребацивањем дугмета у ЈаваСцрипт-у. Пример садржи ХТМЛ и ЈаваСцрипт код, који су објашњени у наставку:
ХТМЛ код
< хтмл >
< х2 > Пример за пребацивање дугмета < / х2 >
< див ид = 'јс' > Притисните дугме да видите магију < / див >
< дугме онцлицк = 'бтнтог()' > Дугме < / дугме >
< / хтмл >
< скрипта срц = 'тест.јс' >< / скрипта >
У ХТМЛ коду, опис је следећи:
- А <див> ознака је креирана са „ ид=јс ”.
- Након тога, креира се дугме повезано са а “бтнтог()” методом. Притиском „Дугме“ , метода ' бтнтог() ” се покреће.
- На крају, ЈаваСцрипт датотека „тест.јс“ се преноси као срц у склопу <сцрипт> ознаке.
Код за ЈаваСцрипт датотеку “ тест.јс ” се налази овде:
ЈаваСцрипт код
фунцтионбтнтог ( ){
где = документ. гетЕлементБиИд ( 'јс' ) ;
ако ( т. иннерХТМЛ == „Добро дошли у Линукхинт“ ) {
т. иннерХТМЛ = „ЈаваСцрипт свет“ ; }
друго {
т. иннерХТМЛ = „Добро дошли у Линукхинт“ ; }
}
У овом коду:
- гетЕлементБиИд користи се за издвајање ХТМЛ елемента “ јс ” а вредност се чува у променљивој “ т ”.
- Након тога, тхе иннерХТМЛ својство се користи у услову иф да би се проверио текст “ Добродошли у Линукхинт ”.
- Ако је услов тачан, садржај „ Добродошли у Линукхинт ” се замењује са „ЈаваСцрипт Ворлд “.
- Ако је услов нетачан, текст „Добро дошли у Линукхинт“ се додељује као ХТМЛ садржај ознаци див.
Излаз
Излаз показује да преклапање дугмета враћа две поруке као „Добро дошли у Линукхинт“ и „ЈаваСцрипт Свет“ алтернативно.
Пример 2: Укључивање/искључивање дугмета у ЈаваСцрипт-у
Следи пример за промену инлине текста дугмета. У овом примеру, „ ОН/ОФФ ” текст ће алтернативно променити вредност притиском на дугме. ХТМЛ и ЈаваСцрипт кодови су дати овде:
ХТМЛ код
< хтмл >< х2 > Пример за пребацивање дугмета х2 >
< тип уноса = 'дугме' ид = 'миБтн' вредност = 'ВАН'
онцлицк = 'датум();' >
< сцрипт срц = 'тест.јс' > скрипта >
хтмл >
Горњи код је описан као:
- Дугме на које се може кликнути са ИД-ом “миБтн” се креира и његова вредност је подешена на 'ВАН' .
- Притиском на дугме, датум() метод ће се покренути.
- На крају, „тест.јс“ је везан за изворну путању унутар <сцрипт> таг.
ЈаваСцрипт код
фунцтионтгл ( ){
где = документ. гетЕлементБиИд ( 'миБтн' ) ;
ако ( т. вредност == 'НА' ) {
т. вредност = 'ВАН' ; }
елсеиф ( т. вредност == 'ВАН' ) {
т. вредност = 'НА' ; }
}
У овом коду:
- А датум() метода се користи за пребацивање дугмета у ЈаваСцрипт-у.
- У овој методи издвајате ХТМЛ елемент коришћењем гетЕлементБиИд својство, а затим му се додаје изјава иф елсе-иф.
- Ако је „вредност==УКЉУЧЕНО“ , пребаците вредност на 'ВАН'. Ако је вредност ВАН, онда ће вредност бити пребачена на „ НА' .
Излаз
Излаз показује да је дугме искључено ВАН до НА .
То је све! Научили сте да пребацујете дугме у ЈаваСцрипт-у.
Закључак
У ЈаваСцрипт-у, дугме се може користити за пребацивање између различитих стања сопствених вредности или било која функција може бити повезана са операцијом пребацивања. Тхе онцлицк() догађај дугмета је повезан са функцијом. Овај чланак објашњава преглед пребацивања дугмета заједно са два практична примера. Први пример издваја текст помоћу иннерХТМЛ својство и мења га преко дугмета за пребацивање. У другом примеру, вредност самог дугмета се мења коришћењем прилагођене функције.