- Как да превключите бутон в JavaScript?
- Пример 1: Промяна на текстови съобщения чрез превключване на бутон
- Пример 2: Превключване на бутона за ВКЛ./ИЗКЛ. в JavaScript
Как да превключите бутон в JavaScript?
Условният оператор е основно изискване за превключване на бутон в JavaScript. За да постигнете това, трябва да получите елемента и след това да се приложи някаква персонализирана функция, за да се приложи някаква специфична операция върху този елемент. Функцията е свързана със събитието onclick на бутона. Така че, когато бутонът бъде щракнат, тази функция ще бъде изпълнена. Нека практикуваме няколко примера за превключване на бутон в JavaScript.
Пример 1: Промяна на текстови съобщения чрез превключване на бутон
Разглежда се пример за промяна на съобщение чрез превключване на бутон в JavaScript. Примерът включва HTML и JavaScript код, които са обяснени по-долу:
HTML код
< html >
< h2 > Пример за превключване на бутон < / h2 >
< див документ за самоличност = 'js' > Натиснете бутона, за да видите магия < / див >
< бутон onclick = 'btntog()' > Бутон < / бутон >
< / html >
< сценарий src = 'test.js' >< / сценарий >
В HTML код описанието е както следва:
- А етикетът е създаден с „ id=js ”.
- След това се създава бутон, свързан с a „btntog()“ метод. Чрез натискане „Бутон“ , Методът ' btntog() ” се задейства.
- В крайна сметка JavaScript файлът „test.js“ се предава като src в рамките на <скрипт> етикети.
Кодът за JavaScript файла “ test.js ” се предлага тук:
JavaScript код
функцияbtntog ( )
{
където = документ. getElementById ( 'js' ) ;
ако ( T. innerHTML == „Добре дошли в Linuxhint“ ) {
T. innerHTML = „Свят на JavaScript“ ; }
друго {
T. innerHTML = „Добре дошли в Linuxhint“ ; }
}В този код:
- getElementById се използва за извличане на HTML елемента ' js ” и стойността се съхранява в променлива „ T ”.
- След това, innerHTML свойството се използва в условието if за проверка на текста „ Добре дошли в Linuxhint ”.
- Ако условието е вярно, съдържанието „ Добре дошли в Linuxhint ” се заменя с „Светът на JavaScript “.
- Ако условието е грешно, текстът „Добре дошли в Linuxhint“ се присвоява като HTML съдържание към маркера div.
Изход
Резултатът показва, че превключването на бутон връща две съобщения като „Добре дошли в Linuxhint“ и „Свят на JavaScript“ алтернативно.
Пример 2: Превключване на бутона за ВКЛ./ИЗКЛ. в JavaScript
Следва пример за промяна на вградения текст на бутона. В този пример „ ВКЛ./ИЗКЛ ” алтернативно ще промени стойността чрез натискане на бутона. HTML и JavaScript кодовете са предоставени тук:
HTML код
< html >
< h2 > Пример за превключване на бутон h2 >
< тип вход = 'бутон' документ за самоличност = 'myBtn' стойност = 'ИЗКЛЮЧЕНО'
onclick = 'дата();' >
< скрипт src = 'test.js' > сценарий >
html >Горният код е описан като:
- Бутон, върху който може да се кликне, имащ идентификатор на „myBtn“ се създава и стойността му е зададена на „ИЗКЛЮЧЕНО“ .
- С натискане на бутона, дата() методът ще бъде задействан.
- В края, „test.js“ е прикрепен към изходния път вътре <скрипт> етикет.
JavaScript код
функцияtgl ( )
{
където = документ. getElementById ( 'myBtn' ) ;
ако ( T. стойност == 'НА' ) {
T. стойност = 'ИЗКЛЮЧЕНО' ; }
иначе ако ( T. стойност == 'ИЗКЛЮЧЕНО' ) {
T. стойност = 'НА' ; }
}В този код:
- А дата() се използва за превключване на бутон в JavaScript.
- При този метод извличате HTML елемента, като използвате getElementById свойство и след това операторът if else-if се добавя към него.
- Ако „стойност==ВКЛ.“ , превключете стойността на „ИЗКЛЮЧЕНО“. Ако стойността е ИЗКЛЮЧЕНО, тогава стойността ще бъде превключена на „ НА' .
Изход
Изходът показва, че бутонът е превключен от ИЗКЛ да се НА .
Това е всичко! Научихте се да превключвате бутон в JavaScript.
Заключение
В JavaScript може да се използва бутон за превключване между различни състояния на собствените му стойности или всяка функция може да бъде свързана с операцията за превключване. The onclick() събитие на бутона е свързано с функцията. Тази статия обяснява общ преглед на превключването на бутон заедно с два практически примера. Първият пример извлича текста чрез innerHTML свойство и го променя чрез бутон за превключване. Във втория пример стойността на самия бутон се променя с помощта на персонализирана функция.