How to Get Value by Class Name using JavaScript ?

Last Updated : 27 Dec, 2023

This article will show you how to use JavaScript to get value by class name. To get the value of an element by its class name in JavaScript, you can use the getElementsByClassName() method. This method returns an array-like object of all elements with the specified class name. You can then access the value property of the first element in the array to get the value.

Example: In this example, we will get the classname of an element.

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0">
         
    <title>Get Value by Class Name</title>
</head>
 
<body style="text-align: center;">
    <h1 class="heading">
        GeeksforGeeks
    </h1>
 
    <p class="para">
        A computer science portal for geeks
    </p>
     
    <button onclick="myGeeks()">
        Get Value
    </button>
 
    <p id="result"></p>
 
    <script>
        function myGeeks() {
 
            // Get elements with the class name 'heading'
            let headingElements = 
                document.getElementsByClassName('heading');
 
            // Check if any elements with the 
            // specified class name exist
            if (headingElements.length > 0) {
 
                // Access the value of the first 
                // element in the collection
                let headingVal = headingElements[0].innerHTML;
 
                // Update the content of the 'result' element
                document.getElementById('result')
                    .innerHTML = headingVal;
            } else {
                console.log(
                  'Element with class name "heading" not found.');
            }
        }
    </script>
</body>
 
</html>

Output:

Class-content

Example 2: In this example, we will get the second element by class name.

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0">
 
    <title>Get Value by Class Name</title>
</head>
 
<body style="text-align: center;">
    <h1 class="heading text">
        GeeksforGeeks
    </h1>
 
    <p class="para text">
        A computer science portal for geeks
    </p>
     
    <button onclick="myGeeks()">
        Get Value
    </button>
 
    <p id="result"></p>
 
    <script>
        function myGeeks() {
 
            // Get elements with the class name 'heading'
            let headingElements = 
                document.getElementsByClassName('text');
 
            // Check if any elements with the 
            // specified class name exist
            if (headingElements.length > 0) {
 
                // Access the value of the first 
                // element in the collection
                let headingVal = headingElements[1].innerHTML;
 
                // Update the content of the 'result' element
                document.getElementById('result')
                    .innerHTML = headingVal;
            } else {
                console.log(
                  'Element with class name "text" not found.');
            }
        }
    </script>
</body>
 
</html>