How to find the text visible on the button with JavaScript?

Javascript Web Development Front End Technology

In this tutorial, we will discuss different approaches to find the text visible on the button with JavaScript. The text on a button shows what will happen if you click the button. To extract the text on the button, JavaScript provides us with the following two properties.

Using the innerHTML Property
Using the innerText Property

Let us discuss both of the above properties in detail.

Using the innerHTML Property

The innerHTML property not only allows us to get the text inside any tag but also allows us to set the text to any tag. This property also allows us to pass any other tag in the form of a string with the text at the time of setting the text. It will apply the properties of the passed tag to the text inside it. While if we try to get the text inside any tag it will return only the text not any nested child tags inside the targeted element.

Syntax

The following syntax will show the use of the innerHTML property to find text inside any element.

let variable_name = document.getElementById("id").innerHTML;

The above syntax will extract the text inside the element associated with the passed id inside the brackets.

Steps

Step 1 − We first create a button inside the HTML document and assign it an id.
Step 2 − Next, we use the innerHTML property to get the text on the button tag.
Step 3 − In the third step, we will display the text inside the button tag that was extracted using the innerHTML property in above step on the user screen.

Let us look at program examples, where we will find the text visible on the button.

Example 1

The below example will explain how to use the innerHTML property to extract the text inside the button tag −


<html>
<body>
   <button id="btn">click me!</button>
   <p id="result"></p>
   <script>
      let btn = document.getElementById("btn");
      let text = btn.innerHTML;
      document.getElementById("result").innerHTML = "The text visible on
      the button: <b>" + text + "</b>";
   </script>
</body>
</html>

In this example, we are using the innerHTML property to find the text visible on the button with JavaScript. Here, we get the element using its id inside btn and then use the innerHTML property on the btn to get the text and store it inside the text.

Example 2

The below example will show the behavior of the innerHTML property if the button contains any other tag inside it −


<html>
<body>
   <button id="btn"><b>click me!</b></button>
   <p id="result"></p>
   <script>
      let btn = document.getElementById("btn");
      let text = btn.innerHTML;
      document.getElementById("result").innerHTML = "The text visible on the button: <b>" + text + "</b>";
   </script>
</body>
</html>

In the above example, we can clearly see that the output is similar to the previous example output while we used the bold tag inside it, that means the innerHTML property will return only the text inside the button tag not any kind of tag it contains.

Using the innerText Property

The innerText property also behaves similar to the innerHTML property. Similar to the innerHTML, it also allows us to get as well as set the text to any HTML tag. But unlike of innerHTML, it does not allow us to pass the tags with the text. If you do so, it will consider the tags as text and display them on user screen as it is. While, it will return only the text inside the tag if we try to extract the text.

Syntax

Following the syntax that shows how we can use the innerText property −

let variableName = document.getElementById("id").innerText;

This syntax will extract the text inside the particular HTML tag and stores it in given variable

Steps

Step 1 − In first step, we will define a button tag in HTML document whose text we will try to find.
Step 2 − In next step, we will use the innerText property as shown in above syntax to get the text inside the button tag.
Step 3 − In this step, we will show the output to the user on the screen.

Let us discuss the practical implementation of it with a program example −

Example 3

The below example will illustrate the use of the innerText property to get text visible on the button.


<html>
<body>
   <button id="btn">click me!</button>
   <p id="result"></p>
   <script>
      let btn = document.getElementById("btn");
      let text = btn.innerText;
      document.getElementById("result").innerHTML = "The text visible on the button: <b>" + text + "</b>";
   </script>
</body>
</html>

In above example, we have used the innerText property to find the text inside the button using JavaScript. Similar to previous examples, first we target the element with its id and then extract the text using the innetText property

NOTE − The innerText and innerHTML property will behave similarly if the targeted element contains any other element inside it, as shown in example 2 of innerHTML property.

In this tutorial, we have learnt how we can find the text visible on the button using the innerHTML and innerText properties of JavaScript. We also discussed that how both of these properties will behave if the button tag contains any other tag inside it. We can use these properties to get and set the text of any element or tag of the HTML.

Abhishek

Updated on: 31-Oct-2022

7K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started