HTML DOM Output name Property

Last Updated : 15 Jun, 2023

The Output name Property in HTML DOM is used to set or return the value of the name Attribute of an <output> element. The name Attribute is used to reference the form-data after submitting the form or to reference the element in JavaScript.

Syntax:

It returns the name property.

outputObject.name

It set the name property.

outputObject.name = name

Property value: It contains the value name Which specifies the name of the Output Element.

Return value: It returns a string value that specifies the name of the Output Element.

Example 1: This Example returns an Output name Property.

HTML

<!DOCTYPE html>
<html>
  
<head>
    <title>
        HTML DOM Output name Property
    </title>
    <style>
        body {
            text-align: center;
        }
        h1 {
            color: green;
        }
    </style>
</head>

<body>
    <h1>GeeksforGeeks</h1>
    <h4>
        HTML DOM Output name Property
    </h4>
    <form oninput="sumresult.value = parseInt(A.value)
                + parseInt(B.value) + parseInt(C.value)">
        <input type="number" name="A" value="50" /> +

        <input type="range" name="B" value="0" /> +

        <input type="number" name="C" value="50" />
        <br /> Submit Result:
        <output name="sumresult" id="geeks" for="A B C">
        </output>
        <br>
        <br>
    </form>
    <Button onclick="myGeeks()">Submit</Button>
    <h2 id="sudo"></h2>
  
    <script>
        function myGeeks() {
          let x = document.getElementById("geeks").name;
            document.getElementById("sudo").innerHTML = x;
        }
    </script>

</body>

</html>

Output:

Example 2: This Example sets the Output name Property.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>
        HTML DOM Output name Property
    </title>
    <style>
        body {
            text-align: center;
        }

        h1 {
            color: green;
        }
    </style>
</head>

<body>
    <h1>GeeksforGeeks</h1>
    <h4>
        HTML DOM Output name Property
    </h4>
    <form oninput="sumresult.value = parseInt(A.value)
                + parseInt(B.value) + parseInt(C.value)">
        <input type="number" name="A" value="50" /> +

        <input type="range" name="B" value="0" /> +

        <input type="number" name="C" value="50" />
        <br /> Submit Result:
        <output name="sumresult" id="geeks" for="A B C">
        </output>
        <br>
        <br>
    </form>
    <Button onclick="myGeeks()">Submit</Button>
    <h2 id="sudo"></h2>
    <script>
        function myGeeks() {
            let x = document.getElementById("geeks").name =
                "Total result";
            document.getElementById("sudo").innerHTML =
                "The name was changed to " + x;
        }
    </script>
</body>

</html>