Paano Mag-toggle ng Button sa JavaScript

• Paano Mag-toggle ng Button sa JavaScript?
• Halimbawa 1: Pagbabago ng Mga Tekstong Mensahe sa pamamagitan ng Pag-toggle ng Button
• Halimbawa 2: Toggling ON/OFF Button sa JavaScript

Paano Mag-toggle ng Button sa JavaScript?

Ang conditional statement ay isang pangunahing kinakailangan para sa pag-toggle ng isang button sa JavaScript. Upang makamit ito, kailangan mong makuha ang elemento at pagkatapos ay inilapat ang ilang custom na function upang maglapat ng ilang partikular na operasyon sa elementong iyon. Ang function ay nauugnay sa onclick na kaganapan ng button. Kaya't, sa tuwing na-click ang pindutan, ang function na iyon ay isasagawa. Magsanay tayo ng ilang halimbawa upang i-toggle ang isang button sa JavaScript.

Halimbawa 1: Pagbabago ng Mga Tekstong Mensahe sa pamamagitan ng Pag-toggle ng Button

Ang isang halimbawa ay isinasaalang-alang upang baguhin ang isang mensahe sa pamamagitan ng pag-toggle ng isang button sa JavaScript. Ang halimbawa ay binubuo ng HTML at JavaScript code, na ipinaliwanag sa ibaba:

HTML code

Sa HTML code, ang paglalarawan ay ang mga sumusunod:

• A
  Ang tag ay nilikha gamit ang isang ' id=js ”.
• Pagkatapos nito, nilikha ang isang pindutan na nauugnay sa a “btntog()” paraan. Sa pamamagitan ng pagpindot “Pindutan” , ang paraan ' btntog() ” ay na-trigger.
• Sa huli, ang JavaScript file “test.js” ay naipasa bilang src sa loob ng
  

  ---

  JavaScript code

  functionbtntog ( )
  {
  saan = dokumento. getElementById ( 'js' ) ;
  kung ( t. innerHTML == 'Maligayang pagdating sa Linuxhint' ) {
  t. innerHTML = 'JavaScript World' ; }
  iba pa {
  t. innerHTML = 'Maligayang pagdating sa Linuxhint' ; }
  }

  Sa code na ito:

  
  
  
  • getElementById ay ginagamit upang kunin ang HTML na elemento ' js 'at ang halaga ay nakaimbak sa isang variable' t ”.
  • Pagkatapos nito, ang innerHTML ang ari-arian ay ginagamit sa kung kundisyon upang suriin ang tekstong “ Maligayang pagdating sa Linuxhint ”.
  • Kung totoo ang kundisyon, ang nilalaman ' Maligayang pagdating sa Linuxhint ” ay pinalitan ng “Duno ng JavaScript “.
  • Kung mali ang kundisyon, ang text “Maligayang pagdating sa Linuxhint” ay itinalaga bilang HTML na nilalaman sa div tag.

  Output

  

  Ipinapakita ng output na ang pag-togg sa isang button ay nagbabalik ng dalawang mensahe bilang “Maligayang pagdating sa Linuxhint” at “JavaScript World” bilang kahalili.

  Halimbawa 2: Toggling ON/OFF Button sa JavaScript

  Ang isang halimbawa ay sinusunod upang baguhin ang inline na teksto ng button. Sa halimbawang ito, ang ' BUKAS SARADO ” text ay kahalili na magbabago ng halaga sa pamamagitan ng pagpindot sa pindutan. Ang mga HTML at JavaScript code ay ibinigay dito:

  HTML code

  < html >
  
  < h2 > Halimbawa upang i-toggle ang isang button h2 >
  
  < uri ng input = 'button' id = 'myBtn' halaga = 'OFF'
  
  onclick = 'petsa();' >
  
  < script src = 'test.js' > iskrip >
  
  html >

  Ang code sa itaas ay inilarawan bilang:

  • Isang naki-click na button na may id ng “myBtn” ay nilikha at ang halaga nito ay nakatakda sa “OFF” .
  • Sa pamamagitan ng pagpindot sa pindutan, ang petsa() paraan ay ma-trigger.
  • Sa huli, “test.js” ay naka-attach sa source path sa loob