search

Home  >  Article  >  Web Front-end  >  How to change the text of a label using JavaScript?

How to change the text of a label using JavaScript?

WBOY
WBOYforward
2023-09-03 23:53:022019browse

如何使用 JavaScript 更改标签的文本？

Before we learn how to change the text of the label element in an HTML document, let us first understand what is the label tag itself?

The

tag helps improve web page usability for mouse users because it can toggle the text within it if the user clicks on it.

Now let’s discuss ways to change the text of a label element using JavaScript.

JavaScript allows us to change the text of any element in an HTML document using two built-in properties as shown below -

  • Use innerHTML attribute.

  • Use innerText attribute.

Use innerHTML attribute

innerHTML attribute allows us to change or assign new text using some HTML, i.e. you can use HTML tags while feeding it new text and manage the new text according to its importance by defining it using different HTML elements.

grammar

The following syntax is used to change or assign new text to a label element using JavaScript's innerHTML attribute -

selected_label_element.innerHTML = " new Text ";

Let’s see the practical implementation of changing the innerHTML property of the label element text using a JavaScript code example -

algorithm

  • Step 1 - In the first step, we will add a tag element with an ID to the HTML document in order to crawl it in JavaScript and later use the innerHTML attribute Change its text.

  • Step 2 - In the next step, we will add an input element to the document to get the input text from the user and replace the text of the label element with that text. p>

  • Step 3 - In this step we will add a button element with an onclick event associated with it that will take a function as a value and when the user clicks the button Call it.

  • Step 4 - In the fourth step, we will define a JavaScript custom function in which we will change the text of the label tag using the innerHTML property as shown in the syntax above.

  • Step 5 - In the final step we assign the function defined in the last step to the onclick event defined in association with the button label so that it can be called later on when the button is clicked .

Example

The following example will explain how to actually use the innerHTML attribute to change the text of a label element using JavaScript -

<html>
<body>
   <h2>Changing the text of a label using JavaScript</h2>
   <p id = "upper"> The text of the below label element will be replaced by the text you enter in input bar once you click the button. </p>
   <label id = "labelText"> This is the initial text inside the label element. </label> <br>
   <input type = "text" id = "inp"> <br> <br>
   <button id = "btn" onclick = "changeText()"> Click to change the Text </button>
   <script>
      var label = document.getElementById("labelText");
      function changeText() {
         var inp = document.getElementById("inp");
         var enteredText = inp.value;
         label.innerHTML = " <b> " + enteredText + ", </b> is the new text of the label element that replaces the previous text, which is entered by you. </b> ";
      }
   </script>
</body>
</html>

In the above example, first we get the tag element using the ID assigned to it in the document, and then use the innerHTML property to change the text to a new text that also contains the HTML tag.

Use innerText attribute

Like the innerHTML attribute, the innerText attribute is also used to change the text of any HTML element present in the HTML document. It is almost similar to the innerHTML attribute, the only difference is that it does not allow the use of HTML elements that contain text within them. If you try to use HTML elements with text, it will treat them as part of the new text and display it on the user's screen as-is.

grammar

The following syntax will show you how to use the innerText attribute to change the text of a label element -

selected_label_element.innerText = " new Text ";

Let us understand it in detail with the help of JavaScript code examples and implement it practically in it.

algorithm

The algorithms of the previous example and this example are almost similar. You only need to make a few small changes, replacing the innerHTML attribute with the innerText attribute in the example above to change the text.

Example

The following example will illustrate how to use the innerText attribute to change the text of a label element in JavaScript -

<html>
<body>
   <h2>Changing the text of a label using JavaScript</h2>
   <p id = "upper">The text of the below label element will be replaced by the text you enter in input bar once you click the button.</p>
   <label id = "labelText">This is the initial text inside the label element.</label> <br>
   <input type = "text" id = "inp"> <br> <br>
   <button id = "btn" onclick = "changeText()">Click to change the Text</button>
   <script>
      var label = document.getElementById("labelText");
      function changeText() {
         var inp = document.getElementById("inp");
         var enteredText = inp.value;
         label.innerText = enteredText + ", is the new text of the label element that replaces the previous text, which is entered by you. ";
      }
   </script>
</body>
</html>

In this example, we use JavaScript to change the text of the label element in the same way we use the innerHTML property.

In this article, we looked at two different ways to change the text of a tag element in an HTML document and their practical implementation in code examples. In the previous one, we changed the text using the innerHTML attribute, which allows using HTML elements to provide text within double quotes. However, in the latter one, we used the innerText property, which does not allow this.

The above is the detailed content of How to change the text of a label using JavaScript?. For more information, please follow other related articles on the PHP Chinese website!

Statement：
This article is reproduced at:tutorialspoint.com. If there is any infringement, please contact admin@php.cn delete
Previous article：Build a blog application homepage using Angular and MongoDBNext article：Build a blog application homepage using Angular and MongoDB

Related articles

See more