Calculating values from HTML form and updating output on onChange event

JavaScript
1

I created JavaScript that calculate total amount based on two input variables (price, quantity) . The script should take input values from HTML form and show the result in the “Total” field , in the same form. The calculations should be updated on onChange event. How to accomplish this tasks: to pass values of form input fields (Price , Quantity) to Javascript on onChange event and dynamically update “Total” field value in real-time? (without external JS libs)

<!DOCTYPE html>
<body>
<p>Calculator</p>

<form>
  <label for="fname">Price:</label><br>
  <input type="number" id="price" name="price" value="0.0458" min="0" step="0.0001"><br><br>
  <label for="lname">Quantity:</label><br>
  <input type="number" id="quantity" name="quantity" value="1" min="1"><br><br>
  <label for="total">Total:</label><br>
  <input type="text" id="total" name="total" value="" readonly><br><br>
  <input type="reset" value="Reset">
</form>

<p id="price"></p>
<p id="quantity"></p>
<p id="total"></p>

<script>
let B1 = 0.0379;
let B2  = 1;
let B3 = B2 * 10.702 * 1.02;
let B4 = B3 * B1;
let B5 = B3 * 0.00321;
let B6 = Math.round((B4 + B5) * 100) / 100;
let B7 = B3 * 0.0121219;
let B8 = 4.62;
let B9 = B7 + B8;
let B10 = B3 * 0.0038;
let B11 = B6 + B9 + B10;
let B12 = Math.floor((B11 * 1.21) * Math.pow(10, 2)) / Math.pow(10, 2);
document.getElementById("total").innerHTML = B12;
document.getElementById("price").innerHTML = B1;
document.getElementById("quantity").innerHTML = B2;
</script>

</body>
</html>
2

what have you tried? have you done any research on how to have code execute when an event happens on the page?

3

I looked on some w3s examples how to use the HTML DOM to assign an “onchange” event to an input element.

In HTML part it should be <input type="text" id="fname" onchange="myFunction()">

and in Javascript part:


<script>
function myFunction() {
  var x = document.getElementById("fname");
  x.value = x.value.toUpperCase();
}
</script>

Or also to use the addEventListener() method to attach a “change” event to an input element. But I don’t know what will be better method for this particular case and how to adjust it properly.

4

they would work the same, but the addEventListener I think is the preferred method currently, so maybe try writing it with that?

5

so in HTML form it should be
<input type="text" id="total" name="total" value="" onchange="myFunction(this.value)" readonly> ?

6

if you want to use onchange instead of using the event listener, yes

7

if use event listener, the changes are only in javascript itself?

8

what do you mean with “the changes are only in javascript itself”?
you use JS to change the elements you want to change

9

where to find examples of HTML DOM Element addEventListener() method for my task?

10

have you tried to do some research? examples for addEventListener are not hidden

11

Looking at the possible uses of addEventListener method, I see that it’s mainly intended for events such as “mouseover”, “click”, “mouseout”,“mousemove”. This HTML page intended for use mainly on smartphone screen, so these events probably won’t be the most convenient.

12

can’t it be used with the change event you mentioned earlier?

13

something like this:

element.addEventListener("change", myFunction);

function myFunction() {
  document.getElementById("total").innerHTML = B12;
}

but how this interface with code, can’t get this

14

I think you should use .value instead of .innerHTML for certain inputs.
innerHTML is more useful for handling nested elements and with that code, you just want to change the value of the total field.

You event listener example seems fine to me.

15

Can’t get it work: editor

16

I agree with @faust.levity about using .value to pick up either the default or user-entered values of the price and quantity elements. But I think for your purposes you might be happier using the input event for your listener. And, assuming you want to calculate total based on a change to either price or quantity, you will need two listeners, one for each.

But…your code has errors: the HTML structure is not well-formed; there are invalid label/input associations and non-unique id attribute values…

I suggest getting started with the fCC Responsive Web Design curriculum where all of these are covered.

1 Like
17

where is errors, specifically?

18

Try using an HTML validator https://validator.w3.org/#validate_by_input

19

like this

element.addEventListener("input", calculate);
   function calculate() {
        var inputOne = document.getElementById("price").value;
        var inputOne = document.getElementById("quantity").value;
            var result = +inputOne + +inputTwo 
            
            return result
    }
    calculate()

not clear how to show result, in the new form? can someone show how it should be

20

Following the logic of your code, you may want to update the “Total” fields .value.
What do you mean by “new form”?

Why do you use var? If it´s just for the example, than I guess it´s okay.
Using var considered to be a bad practice nowadays.