Paano Baguhin ang Teksto ng Label Gamit ang JavaScript

Sa proseso ng pagsagot sa isang partikular na form o isang palatanungan, madalas may mga sitwasyon kung kailan kailangang magpakita ng partikular na sagot o abiso bilang tugon sa napiling opsyon. Halimbawa, ang pagharap sa mga tanong na maramihang pagpipilian, atbp. Sa ganitong mga kaso, ang pagpapalit ng teksto ng label gamit ang JavaScript ay lubhang nakakatulong sa pagpapabuti ng pagiging naa-access ng mga HTML form at ang pangkalahatang disenyo ng dokumento.

Paano Baguhin ang Teksto ng Label Gamit ang JavaScript?

Ang mga sumusunod na diskarte ay maaaring magamit upang baguhin ang teksto ng label sa JavaScript:

- “ innerHTML ” ari-arian.
- “ innerText ” ari-arian.
- jQuery ' text() 'at' html() ' paraan.

Diskarte 1: Baguhin ang Teksto ng Label sa JavaScript Gamit ang innerHTML Property

Ang ' innerHTML Ibinabalik ng ” property ang panloob na HTML na nilalaman ng isang elemento. Maaaring gamitin ang property na ito para kunin ang partikular na label at baguhin ang text nito sa isang bagong nakatalagang value ng text.

Syntax

elemento.innerHTML

Sa itaas na syntax:

- “ elemento ” ay tumutukoy sa elemento kung saan ilalapat ang partikular na property upang ibalik ang nilalamang HTML nito.

Halimbawa

Pumunta sa sumusunod na code snippet para malinaw na ipaliwanag ang nakasaad na konsepto:

< gitna >< katawan >
< label id = 'lbl' > DOM label >
< br >< br >
< pindutan onclick = 'labelText()' > Pindutin dito pindutan >
katawan > gitna >

- Una, sa loob ng ' 'tag, isama ang ' label 'na may tinukoy na' id 'at' text ” mga halaga.
- Pagkatapos nito, lumikha ng isang pindutan na may nakalakip na ' onclick ” kaganapang nagpapagana ng function labelText().

Ngayon, sundin ang ibinigay na JavaScript code sa ibaba:

function labelText ( ) {
hayaan get = document.getElementById ( 'lbl' )
get.innerHTML= 'Ang pinaikling pangalan ay Document Object Model' ;
}

- Ipahayag ang isang function na pinangalanang ' labelText() ”.
- Sa kahulugan nito, i-access ang id ng tinukoy na ' label ' gamit ang ' document.getElementById() ” paraan.
- Panghuli, ilapat ang innerHTML property at magtalaga ng bagong “ text ” value sa na-access na label. Magreresulta ito sa pagbabago ng teksto ng label sa isang bagong halaga ng teksto sa pag-click sa pindutan.

Output

Sa output sa itaas, mapapansin na ang halaga ng teksto ng ' label ' ay binago sa parehong DOM at sa code pati na rin sa ' Mga elemento ” seksyon.

Diskarte 2: Baguhin ang Teksto ng Label sa JavaScript Gamit ang innerText Property

Ang ' innerText ” ibinabalik ng property ang text content ng elemento. Maaaring ipatupad ang property na ito para maglaan ng value ng user-input na inilagay sa input field sa text ng nakatalagang label.

Syntax

elemento.innerText

Sa itaas na syntax:

- “ elemento ” ay nagpapahiwatig ng elemento kung saan ilalapat ang partikular na pag-aari upang ibalik ang nilalamang teksto nito.

Halimbawa

Ang sumusunod na halimbawa ay nagpapakita ng nakasaad na konsepto:

< gitna >< katawan >
Maglagay ng Pangalan: < input uri = 'text' id = 'pangalan' halaga = '' autocomplete = 'off' >
< p >< input uri = 'button' id = 'bt' halaga = 'Baguhin ang Teksto ng Label' onclick = 'labelText()' > p >
< label id = 'lbl' > N / A label >
katawan > gitna >

- Una, maglaan ng input text field na may tinukoy na “ id ”. Ang ' wala Ipinapahiwatig ng ” value dito na kukunin ang value mula sa user at itatakda ang autocomplete sa “ off ” ay maiiwasan ang mga iminungkahing halaga.
- Pagkatapos nito, magsama ng label na may tinukoy na ' id 'at' text ” halaga.

Ngayon sa JavaScript code snippet, gawin ang mga sumusunod na hakbang:

function labelText ( ) {
hayaan get = document.getElementById ( 'lbl' ) ;
hayaan pangalan = document.getElementById ( 'pangalan' ) .value;
get.innerText = pangalan;
}

- Tukuyin ang isang function na pinangalanang ' labelText() ”. Sa kahulugan nito, i-access ang nilikhang label gamit ang “ document.getElementById() ” paraan.
- Katulad nito, ulitin ang hakbang sa itaas upang ma-access ang tinukoy na field ng input ng text at makuha ang value na inilagay ng user mula dito.
- Panghuli, italaga ang value na inilagay ng user mula sa nakaraang hakbang sa kinuhang label. Papalitan nito ang text ng label sa value na inilagay ng user sa field ng input ng text.

Output

Sa output sa itaas, maliwanag na ang ninanais na pangangailangan ay nakakamit.

Approach 3: Baguhin ang Label Text sa JavaScript Gamit ang jQuery text() at html() Methods

Ang ' text() Ibinabalik ng pamamaraang ” ang nilalaman ng teksto ng mga napiling elemento. Ang “ html() Ibinabalik ng pamamaraang ” ang innerHTML na nilalaman ng mga napiling elemento.

Syntax

$ ( tagapili ) .text ( )

Sa syntax na ito:

- “ tagapili ” tumuturo sa nilalaman ng teksto ng na-access na elemento.

$ ( tagapili ) .html ( )

Sa ibinigay na syntax sa itaas:

- “ tagapili ” ay tumutukoy sa innerHTML ng na-access na elemento.

Halimbawa

Ang halimbawang ito ay maglalarawan ng nakasaad na konsepto gamit ang mga pamamaraan ng jQuery.

Pumunta sa snippet ng code na ibinigay sa ibaba:

< iskrip src = “https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js” > iskrip >
< gitna >< katawan >
< label id = 'lbl1' > Ito ang sumusunod na Website: label >
< br >< br >
< label id = 'lbl2' > Nilalaman: label >
< br >< br >
< pindutan onclick = 'labelText()' > I-click para sa Website pindutan >
< pindutan onclick = 'labelText2()' > I-click para sa Nilalaman pindutan >
katawan > gitna >

- Una, isama ang ' jQuery ” library upang ilapat ang mga pamamaraan nito.
- Pagkatapos nito, sa loob ng ' 'tag, isama ang dalawang magkaibang label na may tinukoy na ' id ” at halaga ng teksto laban sa bawat isa sa kanila.
- Gayundin, maglaan ng hiwalay na mga pindutan sa bawat isa sa mga nilikhang label. Ang parehong mga pindutan ay may nakalakip na ' onclick ” kaganapan na humihiling ng dalawang magkaibang tinukoy na function.

Ngayon, dumaan sa mga sumusunod na linya ng code ng JavaScript:

function labelText ( ) {
$ ( '#lbl1' ) .text ( 'Linux' )
}
function labelText2 ( ) {
$ ( '#lbl2' ) .html ( 'JavaScript' )
}

- Sa unang hakbang, ipahayag ang isang function na pinangalanang ' labelText() ”.
- Sa kahulugan nito, i-access ang label laban sa kinuhang “ id 'at ilapat ang' text() ” paraan nito. Magreresulta ito sa pagbabago ng text value ng label sa tinukoy na value sa parameter nito.
- Katulad nito, tukuyin ang isang function na pinangalanang ' labelText2() ”.
- Dito, sa katulad na paraan, ulitin ang tinalakay sa itaas na hakbang para sa pag-access sa label. Sa kasong ito, ilapat ang ' html() ” paraan. Ang pamamaraang ito ay gagana rin sa parehong paraan at ibabalik ang tinukoy na halaga ng teksto sa gayon ay binabago ang teksto ng label.

Output

Sa output sa itaas, ang unang binagong halaga ng teksto ng label sa Document Object Model (DOM) ay tumutugma sa jQuery ' text() 'paraan at ang isa pa ay resulta ng ' html() ” paraan.

Pinagsama-sama namin ang mga diskarte upang baguhin ang teksto ng label gamit ang JavaScript.

Konklusyon

Ang ' panloobHTML ' ari-arian, ang ' panloob na Teksto ' property, o jQuery's ' text() 'at' html() Ang mga pamamaraan ay maaaring gamitin upang baguhin ang teksto ng label gamit ang JavaScript. Maaaring ilapat ang innerHTML property para makuha ang partikular na label at baguhin ang text content nito sa isang bagong nakatalagang text value. Ang innerText property ay maaaring ipatupad upang maglaan ng bagong text value sa na-access na label sa gayon ay binabago ito. Maaaring gamitin ang diskarte sa jQuery upang baguhin ang halaga ng teksto ng label sa tulong ng dalawang pamamaraan nito na nagreresulta sa parehong kinalabasan sa anyo ng dalawang magkaibang inilaan na halaga ng teksto. Ang write-up na ito ay nagpakita ng mga diskarte upang baguhin ang label ng text gamit ang JavaScript.

Paano Baguhin ang Teksto ng Label Gamit ang JavaScript