HTML5: How to specify the relationship between the result of the calculation, and the elements used in the calculation?
Solution:
HTML Code:
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 solution in the browser
Supported browser
![]() |
![]() |
![]() |
![]() |
![]() |
Yes | Yes | Yes | Yes | Yes |
What is the difficulty level of this exercise?
Test your Programming skills with w3resource's quiz.