Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to find the value of a button with JavaScript?
In this tutorial, we will learn how to find the value of a button with JavaScript. Button elements often have a value attribute that stores important data for form processing or identification purposes. JavaScript provides the value property to access this attribute programmatically.
Understanding how to retrieve button values is essential when working with HTML forms and interactive web applications.
Button value Property
The button value property returns the value of the value attribute assigned to a button element. This property is commonly used to distinguish between multiple buttons or pass specific data when forms are submitted.
Syntax
let buttonValue = document.getElementById("buttonId").value;
Example 1: Basic Button Value Access
This example demonstrates how to get the value of a button using the value property:
<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 button: <b>" + val + "</b>";
</script>
</body>
</html>
In this example, we target the button element using getElementById() and access its value property to retrieve the string "submit_button".
Example 2: Dynamic Button Text Assignment
This example shows how to set the button's display text to match its value attribute:
<html>
<body>
<h3>Dynamic button text from value</h3>
<form>
<button type="submit" id="btn" value="Submit_Form">Original Text</button>
</form>
<p id="result"></p>
<script>
let btn = document.getElementById("btn");
let val = btn.value;
btn.innerHTML = val;
document.getElementById("result").innerHTML = "Button value: <b>" + val + "</b>";
</script>
</body>
</html>
Here we dynamically update the button's text content to match its value attribute using the innerHTML property.
Example 3: Interactive Button Value Display
This example demonstrates retrieving button values on user interaction:
<html>
<body>
<h3>Click to reveal button value</h3>
<form>
<button type="submit" id="btn" value="Submit" onclick="display(event)">
Click to change text!
</button>
</form>
<p id="result"></p>
<script>
function display(event) {
event.preventDefault();
let btn = document.getElementById("btn");
let val = btn.value;
btn.innerHTML = val;
document.getElementById("result").innerHTML = "Button value: <b>" + val + "</b>";
}
</script>
</body>
</html>
In this interactive example, clicking the button triggers a function that changes the button's text to its value and displays the value below.
Key Points
- The
valueproperty provides direct access to a button's value attribute - Button values are commonly used for form processing and element identification
- You can dynamically modify button text using
innerHTMLortextContent - Always use
preventDefault()when handling button clicks to avoid form submission
Conclusion
The value property is essential for accessing button values in JavaScript. Use it to retrieve attribute data, distinguish between multiple buttons, or dynamically update button content based on stored values.
32K+ Views
