w3resource

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

Go to Exercise page

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

    Firefox logo Chrome logo Opera logo Safari logo Internet Explorer logo
    Yes Yes Yes Yes Yes

    Go to Exercise page

What is the difficulty level of this exercise?

Test your Programming skills with w3resource's quiz.



Follow us on Facebook and Twitter for latest update.