Jonas Ley Jonas Ley - 2 months ago 11
Javascript Question

jQuery Function with instant Output on the page

I have an input on my page where a user can enter a price for something.
Now I want to add three paragraphs where this value should be processed something like this:

In the first one the value of insurance costs should be calculated in percent and printed.

The second one should show another cost which is also calculated in percent.

In the last paragraph, the difference between the input and the input minus the two costs should be printed.

All these actions are meant to happen when the user types the price.

How would the jQuery function and the html components look like?

I have this table row:

<tr>
<td id="typedPrice" class="text-center" style="vertical-align: middle;"><span class="tableEntry"></span></td>
<td id="insuranceCost" class="text-center" style="vertical-align: middle;"><span class="tableEntry"></span></td>
<td id="provision" class="text-center" style="vertical-align: middle;"><span class="tableEntry"></span></td>
<td id="CustomerEarnings" class="text-center" style="vertical-align: middle;"><span class="tableEntry" style="border-bottom: 1px solid #000; text-decoration: underline;"></span></td>
</tr>

Answer

HTML Code

  <input type="text" id="price1" onchange="changePrice1()" onkeyup="changePrice1()">
   <div class="price1"></div>
   <div class="price2"></div>
   <div class="diff"></div>

JS Code

function changePrice1() {
  var price1 = $('#price1').val();
  var insurance = price1/50*100;
  var other = price1/40*100;
  var both = other-insurance;
  $('.price1').html("Insurance = " + insurance);
  $('.price2').html("other = " + other);
  $('.diff').html("Diff = " + both);
 }

Demo example : https://jsbin.com/luhola/19/edit?html,js,output

Comments