Как переключить кнопку в JavaScript

Kak Pereklucit Knopku V Javascript

Переключение — это концепция в JavaScript для альтернативного изменения любого свойства элемента или перехода к определенной операции. JavaScript может переключаться между несколькими свойствами, такими как цвет фона, кнопка, текст и размер шрифта. Этот эффект переключения может быть связан с кнопкой, которую клиентам легче выполнять. В этом посте продемонстрирован способ переключения кнопки в 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 свойство и изменяет его с помощью переключателя. Во втором примере значение самой кнопки изменяется с помощью пользовательской функции.