In this article, we will know which tag will be useful for rendering the calculation result. The main problem is to calculate the two or more numbers based on the user input & accordingly render the output for the calculation. For displaying the output, we will use the <output> tag which is used to represent the result of a calculation. This tag can also be used for the calculation of large & complex numbers. We can use <number> tag as well as <range> tag also. All these operations will be performed inside the <form> tag.
Important Terminology Used:
- oninput Event: When an element gets a user input then only oninput event occurs. We take some input from users by using the <input> tag. when the input taken by <input> tag has changed then only this event occurs. The oninput attribute is new in HTML5.
- parseInt() Function: We use parseInt() function to take string & radix as parameter, then it will transfer to integer. The radix parameter is used to specify which numeral system to be used. If the string does not contain a numeric value then it returns NaN i.e, not a number.
- <output> tag: The <output> tag in HTML is used to represent the result of a calculation. This tag is used to calculate a large calculation also. Basically, this tag takes two or more inputs from the user & then shows the result of the output.
Approach:
- First, we will color the background with light blue color. this operation will be done in <body> tag.
- Then initialize the <form> tag.
- In the <form> tag, we will take a total of three inputs. All three inputs will be <number> type. Also, you can use the <range> tag also.
- The first input number will be initialized by 10. Then we have to multiply with the second inserted number. which is initialized with 10.
- Then subtract the third number from the total number which is initialized by 100.
- Use <output> tag & declare the name & assigned the value as ‘sou’.
- Then we have to write <form oninput=”sou.value=parseInt(gfg.value)*parseInt(gho.value)-parseInt(ar.value)”>. This means the first two inputs will be multiplied & then the third one is going to subtracted from the total number then the result stored to name ‘sou’.
Example 1: Here, we have only used the inputs as a number type.
<!DOCTYPE html> <html>
<body bgcolor="lightblue">
<h1>The GeeksforGeeks Output Example</h1>
<form oninput=
"sou.value=parseInt(gfg.value)*parseInt(gho.value)-parseInt(ar.value)">
<input type="number" id="gfg" value="10"> x
<input type="number" id="gho" value="10"> -
<input type="number" id="ar" value="100"> =
<output name="sou" for="gfg gho ar"></output>
</form>
</body>
</html>
|
Output:
HTML <output> tag
Example 2: Here, we have used two inputs as number type & one as range type. Here, we have only changed the second input type as the range.
<!DOCTYPE html> <html>
<body bgcolor="lightblue">
<h1>The GeeksforGeeks Output Example</h1>
<form oninput=
"sou.value=parseInt(gfg.value)*parseInt(gho.value)-parseInt(ar.value)">
<input type="number" id="gfg" value="10"> x
<input type="range" id="gho" value="10"> -
<input type="number" id="ar" value="100"> =
<output name="sou" for="gfg gho ar"></output>
</form>
</body>
</html>
|
Output:
HTML <input> element with range value