Skip to content
Related Articles

Related Articles

Improve Article

HTML | DOM Output name Property

  • Last Updated : 22 Aug, 2019

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 a JavaScript.

Syntax:

  • It return the name property.
    outputObject.name 
  • It set the name property.
    outputObject.name = name 

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

Return value: It returns a string value which specify the name of the Output Element.

Example 1: This Example returns a Output name Property.






<!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() {
            var x = document.getElementById("geeks").name;
            document.getElementById("sudo").innerHTML = x;
        }
    </script>
  
</body>
  
</html>

Output:

  • Before Clicking On Button:
  • After Clicking On Button:

Example 2: This Example sets the Output name Property.




<!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() {
            var x = document.getElementById("geeks").name =
                "Total result";
            document.getElementById("sudo").innerHTML =
              "The name was changed to " + x;
        }
    </script>
  
</body>
  
</html>

Output:

  • Before Clicking On Button:
  • After Clicking On Button:

Supported Browsers: The browsers supported by HTML DOM Output name Property are listed below:

  • Google Chrome 10.0
  • Firefox 4.0
  • Opera 11.0
  • Safari 5.1

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :