How to find the value of a button with JavaScript?

Javascript Web Development Front End Scripts

In this tutorial, we will learn how we can find the value of a button with JavaScript. Sometimes, we need to use the button tag inside the form tag, where we assign a particularly unique value to each associated with the <form> element using the value attribute. Which later helps the developer to uniquely identify the elements while working with them in the back end. JavaScript provides us with the value property to get the value passed inside the value attribute

Let us discuss the value property in detail.

Button value Property

The button value property is used to get the value of the value attribute of the button.

Syntax

The following is the syntax to get value of value attribute of the button.

let varName = document.getElementById("id").value;

Steps

Step 1 − We first create a button inside a form with a value associated with value attribute.
Step 2 − Next, we target the button element with its id and get the value of the value attribute using the value property.
Step 3 − In the last step, we will display the value extracted from the value attribute on the user screen.

Let us understand it with the help of some program examples.

Example 1

The below example will illustrate the use of value property to get the value of value attribute of the button.


<html>
<body>
   <h3>Find the value of a button</h3>
   <form>
      <button type="submit" id="btn" value="submit_button">click me!</button>
   </form>
   <p id="result"></p>
   <script>
      let btn = document.getElementById("btn");
      let val = btn.value;
      document.getElementById("result").innerHTML = "Value of the above button: <b>" + val + "</b>";
   </script>
</body>
</html>

In this example, we have seen how we can use the value property to get the value inside the button. First, we grab the targeted element using its id in btn and then use the value property on it to get the value of the value attribute inside it.

Let us discuss one more example where we will assign the same value to the button tag as given inside the value attribute dynamically using JavaScript.

Step 1 − In this step, we will define a button tag without any text inside it but with a value attribute associated with particular value.
Step 2 − In second step, we will grab the element with its id the get the value of value attribute using the value property and then assign the same value to the button text using the innerHTML or innerText property of JavaScript_
Step 3 − In the third step, we will display the value of value attribute and will match it with the text of button tag to confirm the assignment.

Example 2

The below example will explain how we can assign the inner text to the button similar to the value of value attribute using the value property.


<html>
<body>
   <h3>Find the value of a button with JavaScript</h3>
   <form>
      <button type="submit" id="btn" value="Submit_button">Submit_button</button>
   </form>
   <p id="result"></p>
   <script>
      let btn = document.getElementById("btn");
      let val = btn.value;
      btn.innerHTML = val;
      document.getElementById("result").innerHTML = "Value of the button: <b>" + val + "</b>";
   </script>
</body>
</html>

In the above example, we have seen how we can assign the text to the button similar to the value of value attribute dynamically using the value property of the JavaScript. In this example, after grabbing the element we store the value in a particular variable then assign that value as the text of button using the innerHTML property of JavaScript.

Let us discuss one more example where we will change the already given text of the button to the value of value attribute.

Step 1 − In this step, we will define a button tag with a text inside it and also a value attribute associated with particular value.
Step 2 − In second step, we will grab the element with its id the get the value of value attribute using the value property and then update the text of the button tag with the value we get, using the innerHTML or innerText property of JavaScript_
Step 3 − In the third step, we will display the value of the value attribute and will match it with the updated text of the button tag to confirm whether the code is working or not.

Example 3

The below example will illustrate the use of value property to change the text of the button tag just by clicking a button.


<html>
<body>
   <h3>Find the value of a button with JavaScript</h3>
   <form>
      <button type="submit" id="btn" value="Submit"
      onclick="display(event)">click to change the text!</button>
   </form>
   <p id="result"></p>
   <script>
      let btn = document.getElementById("btn");
      let val = btn.value;
      function display(event) {
         event.preventDefault();
         btn.innerHTML = val;
      }
      document.getElementById("result").innerHTML = "The value of the button: <b>" + val + "</b>";
   </script>
</body>
</html>

In the above example, we have if you click the click to change text! Button it will automatically change the text of button to the value that is inside the value attribute of the button tag

In this tutorial, we have discussed about the value property of the JavaScript which is used to geth the value of value attribute inside any HTML tag. We also learnt, how we can change the text inside the button tag dynamically to the value of value attribute using the value property. We can change text of any tag using the methods discussed above.