- Как переключить кнопку в JavaScript?
- Пример 1: изменение текстовых сообщений путем переключения кнопки
- Пример 2: Переключение кнопки ВКЛ/ВЫКЛ в JavaScript
Как переключить кнопку в JavaScript?
Условный оператор является основным требованием для переключения кнопки в JavaScript. Для этого вам нужно получить элемент, а затем применить некоторую пользовательскую функцию, чтобы применить определенную операцию к этому элементу. Функция связана с событием onclick кнопки. Так что при каждом нажатии кнопки эта функция будет выполняться. Давайте попрактикуемся в некоторых примерах переключения кнопки в JavaScript.
Пример 1: изменение текстовых сообщений путем переключения кнопки
В качестве примера рассматривается изменение сообщения путем переключения кнопки в JavaScript. Пример содержит код HTML и JavaScript, которые объясняются ниже:
HTML-код
< HTML >
< h2 > Пример переключения кнопки < / h2 >
< див я бы знак равно 'JS' > Нажмите кнопку, чтобы увидеть магию < / див >
< кнопка по щелчку знак равно 'бтнтог()' > Кнопка < / кнопка >
< / HTML >
< сценарий источник знак равно 'test.js' >< / сценарий >
В HTML-коде описание выглядит следующим образом:
- А <дел> тег создается с помощью « идентификатор = js ».
- После этого создается кнопка, связанная с «бтнтог()» метод. При нажатии 'Кнопка' , метод ' бнтог() » срабатывает.
- В конце файл JavaScript «test.js» передается как источник в пределах <скрипт> теги.
Код для файла JavaScript « test.js ” представлено здесь:
JavaScript-код
функцияbtntog ( ){
куда знак равно документ. получитьэлементбиид ( 'JS' ) ;
если ( т. внутреннийHTML == «Добро пожаловать в Линуксхинт» ) {
т. внутреннийHTML знак равно «Мир JavaScript» ; }
еще {
т. внутреннийHTML знак равно «Добро пожаловать в Линуксхинт» ; }
}
В этом коде:
- получитьэлементбиид используется для извлечения HTML-элемента « js ', а значение хранится в переменной ' т ».
- После этого внутреннийHTML свойство используется в условии if для проверки текста « Добро пожаловать в Линуксинт ».
- Если условие истинно, содержимое « Добро пожаловать в Линуксинт ” заменяется на «Мир JavaScript “.
- Если условие ложно, текст «Добро пожаловать в Linuxhint» назначается как HTML-контент тегу div.
Выход
Вывод показывает, что переключение кнопки возвращает два сообщения в виде «Добро пожаловать в Linuxhint» а также «Мир JavaScript» альтернативно.
Пример 2: Переключение кнопки ВКЛ/ВЫКЛ в JavaScript
Далее следует пример изменения встроенного текста кнопки. В этом примере « ВКЛ ВЫКЛ ” альтернативно изменит значение, нажав кнопку. Коды HTML и JavaScript приведены здесь:
HTML-код
< HTML >< h2 > Пример переключения кнопки h2 >
< тип ввода знак равно 'кнопка' я бы знак равно 'мойБтн' ценность знак равно 'ВЫКЛЮЧЕННЫЙ'
по щелчку знак равно 'свидание();' >
< источник сценария знак равно 'test.js' > сценарий >
HTML >
Приведенный выше код описывается как:
- Нажимаемая кнопка с идентификатором «мойБтн» создается, и его значение устанавливается равным 'ВЫКЛЮЧЕННЫЙ' .
- Нажав на кнопку, свидание() метод будет запущен.
- В конце, «test.js» прикрепляется к исходному пути внутри <скрипт> ярлык.
JavaScript-код
функцияtgl ( ){
куда знак равно документ. получитьэлементбиид ( 'мойБтн' ) ;
если ( т. ценность == 'НА' ) {
т. ценность знак равно 'ВЫКЛЮЧЕННЫЙ' ; }
иначе, если ( т. ценность == 'ВЫКЛЮЧЕННЫЙ' ) {
т. ценность знак равно 'НА' ; }
}
В этом коде:
- А свидание() метод используется для переключения кнопки в JavaScript.
- В этом методе вы извлекаете элемент HTML, используя получитьэлементбиид свойство, а затем к нему добавляется оператор if else-if.
- Если «значение == ВКЛ» , переключите значение на 'ВЫКЛЮЧЕННЫЙ'. Если значение ВЫКЛЮЧЕННЫЙ, то значение будет переключено на « НА' .
Выход
Вывод показывает, что кнопка была переключена с ВЫКЛЮЧЕННЫЙ к НА .
Это все! Вы научились переключать кнопку в JavaScript.
Вывод
В JavaScript кнопка может использоваться для переключения между различными состояниями собственных значений, или любая функция может быть связана с операцией переключения. по щелчку() событие кнопки связано с функцией. В этой статье дается обзор переключения кнопок вместе с двумя практическими примерами. В первом примере текст извлекается по внутреннийHTML свойство и изменяет его с помощью переключателя. Во втором примере значение самой кнопки изменяется с помощью пользовательской функции.