Setting label text javascript

How to change the text of a label using JavaScript?

Before going to learn about the method of changing the text of a label element in HTML document, let us understand what is the label tag itself?

The label tag helps in improving the usability of the web page for mouse users, as it can toggle the text inside it if the user clicks on it.

Let us now discuss about the methods of changing the text of the label element using JavaScript.

JavaScript allow us to use two inbuilt properties to change the text of any element in the HTML document, as listed below −

Using the innerHTML property

The innerHTML property allow us to change or assign the new text with some HTML, i.e. you can use the HTML tags while providing new text to it and manage the new text according to the importance using different HTML elements to define it.

Syntax

Following syntax is used to change or assign the new text to the label element using innerHTML property of JavaScript −

selected_label_element.innerHTML = " new Text ";

Let us understand the practical implementation of the innerHTML property to change the text of label element using JavaScript code examples −

Algorithm

• Step 1 − In the first step, we will add a label element to the HTML document with an ID to grab it in JavaScript and change the text of it later using the innerHTML property.
• Step 2 − In the next step, we will add an input element to the document to get input text from the user and replace the text of label element with that text.
• Step 3 − In this step, we will add a button element with a onclick event associated with it which takes a function as value and calls it later when user clicks the button.
• Step 4 − In the fourth step, we will define a JavaScript custom function inside which we use the innerHTML property to change the text of the label tag as shown in the above syntax.
• Step 5 − In the last step, we will assign the function defined in the last step to the onclick event defined associated with the button tag, so that it can call it later on click to the button.

Example

The below example will explain how the innerHTML property is used practically to change the text of the label element using JavaScript −

  
Changing the text of a label using JavaScript
 
The text of the below label element will be replaced by the text you enter in input bar once you click the button.
 This is the initial text inside the label element. 
  
 
 Click to change the Text    

In the above example, first we grabbed the label element with the ID given to it in the document and then use the innerHTML property to change the text with a new text that also contains the HTML tags with it.

Using the innerText property

The innerText property is also used to change the text of any HTML element present in the HTML document as the innerHTML property does. It is almost similar to the innerHTML property, the only difference is that it does not allow to use the HTML elements with the text inside it. If you try to use HTML elements with the text it will consider them as a part of new text and display it on the user screen as it is.

Syntax

Following syntax will show you how to use the innerText property to change the text of label element −

selected_label_element.innerText = " new Text ";

Let us understand it in details with the help of JavaScript code example, where it is implemented practically.

Algorithm

The algorithm of the previous example and this example is almost similar. You just need to perform some minor changes by replacing the innerHTML property in above example with innerText property to change the text.

Example

Below example will illustrates the use of the innerText property to change the text of the label element in JavaScript −

  
Changing the text of a label using JavaScript
 
The text of the below label element will be replaced by the text you enter in input bar once you click the button.
 This is the initial text inside the label element. 
  
 
Click to change the Text var label = document.getElementById("labelText"); function changeText()  

In this example, we have used the innerText property in the same manner as we used the innerHTML property to change the text of the label element using the JavaScript.

In this article, we have learned about the two different methods of changing the text of the label element in the HTML document with their practical implementation inside the code examples. In the former one, we change the text with the innerHTML property which allow to use HTML elements to give as text inside the double quotes. While, in the later one, we used the innerText property which does not allow to do so.

Источник

How to Change Label Text Using JavaScript

In the process of filling out a particular form or a questionnaire, there are often situations when there is a need to display a particular answer or notification in response to the selected option. For instance, dealing with multiple-choice questions, etc. In such cases, changing the label text using JavaScript is very helpful in improving the accessibility of HTML forms and the overall document design.

How to Change Label Text Using JavaScript?

The following approaches can be utilized to change label text in JavaScript:

Approach 1: Change Label Text in JavaScript Using innerHTML Property

The “innerHTML” property returns the inner HTML content of an element. This property can be utilized to fetch the specific label and change its text to a newly assigned text value.

• • “element” refers to the element upon which the specific property will be applied to return its HTML content.

  Go through the following code snippet to explain the stated concept clearly:

  • • First, within the “ ” tag, include the “label” with the specified “id” and “text” values.
    • After that, create a button with an attached “onclick” event invoking the function labelText().

    Now, follow the below-given JavaScript code:

    function labelText ( ) {
    let get = document.getElementById ( ‘lbl’ )
    get.innerHTML= «The abbreviated name is Document Object Model» ;
    }

    • • Declare a function named “labelText()”.
      • In its definition, access the id of the specified “label” using the “document.getElementById()” method.
      • Finally, apply the innerHTML property and assign a new “text” value to the accessed label. This will result in transforming the label text to a new text value upon the button click.

      In the above output, it can be observed that the text value of “label” is changed on both the DOM and in the code as well in the “Elements” section.

      Approach 2: Change Label Text in JavaScript Using the innerText Property

      The “innerText” property returns the element’s text content. This property can be implemented to allocate a user-input value entered in the input field to the assigned label’s text.

      • • “element” indicates the element upon which the specific property will be applied to return its textual content.

        The following example demonstrates the stated concept:

        • • First, allocate an input text field having the specified “id”. The “null” value here indicates that the value will be fetched from the user and setting autocomplete to “off” will avoid the suggested values.
          • After that, include a label having the specified “id” and “text” value.

          Now in the JavaScript code snippet, perform the following steps:

          function labelText ( ) {
          let get = document.getElementById ( ‘lbl’ ) ;
          let name = document.getElementById ( ‘name’ ) .value;
          get.innerText = name;
          }

          • • Define a function named “labelText()”. In its definition, access the created label using the “document.getElementById()” method.
            • Similarly, repeat the above step to access the specified input text field and get the user-entered value from it.
            • Finally, assign the user-entered value from the previous step to the fetched label. This will change the label text to the user-entered value in the input text field.

            In the above output, it is evident that the desired requirement is achieved.

            Approach 3: Change Label Text in JavaScript Using the jQuery text() and html() Methods

            The “text()” method returns the text content of the selected elements.The “html()” method returns the innerHTML content of the selected elements.

            This example will illustrate the stated concept using jQuery methods.

            Go through the below-given code snippet:

            • • Firstly, include the “jQuery” library to apply its methods.
              • After that, within the “ ” tag, include two different labels with the specified “id” and text value against each of them.
              • Also, allocate separate buttons to each of the created labels. Both the buttons will have an attached “onclick” event invoking two different specified functions.

              Now, go through the following JavaScript code lines:

              function labelText ( ) {
              $ ( ‘#lbl1’ ) .text ( «Linuxhint» )
              }
              function labelText2 ( ) {
              $ ( ‘#lbl2’ ) .html ( «JavaScript» )
              }

              • • In the first step, declare a function named “labelText()”.
                • In its definition, access the label against the fetched “id” and apply the “text()” method to it. This will result in changing the text value of the label to the specified value in its parameter.
                • Similarly, define a function named “labelText2()”.
                • Here, similarly, repeat the above-discussed step for accessing the label. In this case, apply the “html()” method. This method will also work in the same way and return the specified text value thereby changing the label text.

                In the above output, the first transformed text value of the label on the Document Object Model (DOM) corresponds to the jQuery “text()” method and the other is a result of the “html()” method.

                We have compiled the approaches to change label text using JavaScript.

                Conclusion

                The “innerHTML” property, the “innerText” property, or jQuery’s “text()” and “html()” methods can be utilized to change label text using JavaScript. The innerHTML property can be applied to get the specific label and change its text content to a newly assigned text value. The innerText property can be implemented to allocate a new text value to the accessed label thereby changing it. The jQuery approach can be used to transform the label’s text value with the help of its two methods resulting in the same outcome in the form of two different allocated text values. This write-up demonstrated the techniques to change label text using JavaScript.

                About the author

                Umar Hassan

                I am a Front-End Web Developer. Being a technical author, I try to learn new things and adapt with them every day. I am passionate to write about evolving software tools and technologies and make it understandable for the end-user.

                Источник

                JS label text | Example and change label text on button click

                The HTML tag is used to add a label to a form control like text, textarea, field, etc. You can set the value or get the value of Label in Javascript.

                The label tag (element) is used to tell users the value that should be entered in the associated input field.

                JS label text example code

                Label with radio Button

                Basic contact form Labels:

                

                How to change label text on button click in JavaScript?

                Answer: Set the id for the label and use getElementById to identify the label then innerHTML property to change or set the text inside the label in JavaScript.JavaScript get element by id value | Simple example code

                Example code:

                    Welcome 
                 Click Here function changeTxt()  

                

                Do comment if you have any doubts and suggestion on this JavaScript topic.

                Note: The All JS Examples codes are tested on the Firefox browser and the Chrome browser.

                OS: Windows 10

                Code: HTML 5 Version

                Источник