This tutorial will explain how to get the value of an element using JavaScript.
How to Get Element Value Using JavaScript?
For getting the value of an HTML element, use the “value” property of the HTMLDataElement interface.
For getting reference of the element, multiple methods are used
- getElementById() method
- getElementByClass() method
- getElementByTagName() method
- querySelector() method
- querySelectorAll() method
Here, the most commonly used methods with the “value” property will be discussed.
Example 1: Get Element Value Using value Property With getElementById() Method
To get the value of the element, use the “value” property with the “getelementById()” method for getting the reference of the element using its assigned “id”.
First, create a form in HTML file, with an input field and a button that will show the entered value in the text field on the “click” event:
<input type="text" id="text" placeholder="Enter some text..."><br><br>
<button onclick="getElementValue()">Get Value of Input Field</button>
</form>
Follow the below given lines of code:
var value = document.getElementById("text").value;
alert(value);
}
In the above code snippet:
- First, define a function “getElementValue()”.
- Then, fetch the element with its id “text” and retrieve its value utilizing the “value” property and store it in a variable “value”.
- Finally, show the value of the element in an alert message.
Output
The above output indicates that the value of the element is successfully fetched using the value property with the getElementById() method.
How to get the reference of the element without any specified id? Follow the below section.
Example 2: Get Element Value Using value Property With querySelector() Method
Another way to get a reference to an element to get its value is to use the “querySelector()” method. It takes a “selector” of an element’s name as an argument and gives the document’s first element that matches the given selector.
Here, first, create a drop-down menu using the <select> tag, and a button that will trigger the “getElementValue()” function for getting the value of selected option:
<select>
<option>HTML</option>
<option>CSS</option>
<option>JavaScript</option>
<option>Java</option>
<option>Python</option>
</select> <br><br>
<button onclick="getElementValue()">Get Value of Input Field</button>
In the JavaScript file, use the following code:
var value = document.querySelector("select").value;
alert(value);
}
In the above lines of code:
- Define a function “getElementValue()”.
- Then, call the “querySelector()” method by passing a selector “select” element with the “value” property, that gets the selected value of the drop-down menu.
- Lastly, show the selected value of the element in an alert message.
The output displays the selected values in an alert message:
Conclusion
To get the value of the DOM’s element, use the “value” property of the HTMLDataElement interface with different methods for getting reference of the element, such as “getElementById()” method, “getElementByClass()” method, or the “querySelector()” method. This tutorial explained the procedure for getting the element value using JavaScript.
