HTML5: How to specify the relationship between the result of the calculation, and the elements used in the calculation?

Last update on February 12 2024 12:52:42 (UTC/GMT +8 hours)

Solution:

HTML Code:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"><!-- Specifies the character encoding for the document -->
<title> How to specify the relationship between the result of the calculation, and the elements used in the calculation</title><!-- Title of the HTML document -->
</head>
<body>
<form oninput="w3resource.value=parseInt(input.value)+parseInt(output.value)"><!-- Form element with oninput attribute triggering calculation -->
0 <!-- Initial value -->
<input type="range" id="input" value="100"><!-- Range input field with default value 100 -->
100 <!-- Maximum value of the range -->
+<input type="number" id="output" value="10"><!-- Number input field with default value 10 -->
=<output name="w3resource" for="input output"></output><!-- Output field displaying the result -->
</form>
</body>
</html>

Explanation:

This HTML code creates a form that performs a calculation in real-time based on user input.
Here's the breakdown:

The form starts with the declaration of the document type and contains various input elements.
JavaScript code within the oninput attribute of the form calculates the sum of the values entered into the input fields (after parsing them as integers).
The parseInt() function is used to convert the input values from strings to integers for proper addition.
The <input> element with type range allows users to select a value within a specified range.
The <input> element with type number allows users to input a numeric value.
The result of the calculation is displayed in the <output> element with the name w3resource.

Live Demo:

See the Pen output-for-answer by w3resource (@w3resource) on CodePen.

See the solution in the browser

Supported browser


Yes	Yes	Yes	Yes	Yes

Go to Exercise page