jQuery update div with value of input onChange

Question

I need to create a mini calculator which involves changing input values, doing a little bit of addition etc then updating div's with the value of the inputs.

$('.skillcount').change(function() {
   var value = parseFloat($(this).val()) / 2;
   alert(value);
   $(".missed").append('value');
});

Fiddle: http://jsfiddle.net/5De46/65/

$('.skillcount').change(function() {
  var value = parseFloat($(this).val()) / 2;
  alert(value);
  $(".missed").append('value');
});

// value from span .missed + 1498
$('.missed').change(function() {
  var value = parseFloat($(this).val()) + 1498;
  alert(value);
  $(".cost").append('value');
});

// value from skillcount - value from '.cost'
$('.skillcount').change(function() {
  var value = parseFloat($(this).val()) - $('.cost');
  alert(value);
  $(".remaining").append('value');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- enter an amount - default 1000 -->
<input type="text" class="skillcount" name="skillcount" value="1000" />

<p>
  <!-- that ammount from skillcount divided by 2 and added into '.missed' -->
  Missed: £
  <span class="missed"></span>
</p>

<p>
  <!-- Take output value of the paragraph '.missed' and + 1498 to it -->
  True Cost: £
  <span class="cost"></span>
</p>

<p>
  <!-- Value of skillcount 'minus' value of the paragraph '.cost' -->
  Remaining: £
  <span class="remaining"></span>
</p>

I have put all comments and explanations in the fiddle in more detail. I just don't know how to take the values from the output and place them into the paragraph then use the values to do more basic calculations.

You need to have a minimal reproducible example in your question, not on a fiddle — j08691
– j08691, Commented Nov 7, 2017 at 15:42
so many changes are not required as it is starting a chain reaction and hence wrong calculation....do all manipulation in one .change() — Rohit Kumar
– Rohit Kumar, Commented Nov 7, 2017 at 16:07

Rohit Kumar · Accepted Answer · 2017-11-07 16:35:07Z

1

Just for simple reason..you have put string quotes on the 'value'

var value = parseFloat($(this).val()) * 2;
  alert(value);
  $(".missed").text('value');

which should have been

var value = parseFloat($(this).val()) / 2;
  alert(value);
  $(".missed").text(value);

also ..you cannot append() what it not html..to change you have to .text()

Secondly you are too liberal with $(this)...which is blank inside $('.missed') function & subsequent because the original value for skillcount has changed ... Also there are a lot of change chains which are not required..

$('.skillcount').change(function() {
   var skillcount= $(".skillcount").val();

    var missed= parseFloat(skillcount) * 2;         
    $(".missed").text(missed);

    var costValue = parseFloat(missed) + 1498;    
    $(".cost").text(costValue);

     var diffValue = parseFloat(skillcount) - costValue;     
    $(".remaining").text(diffValue);
});

I have updated the jsfiddle...could you have a look'

http://jsfiddle.net/6as9gef0/7/

$(document).ready(function(){
onSkillCountChange()

$('.skillcount').keyup(function() {
     onSkillCountChange()
});
 
 function onSkillCountChange(){
 		var originalvalue = $(".skillcount").val();
   
    var value = parseFloat(originalvalue) * 2;
     
    $(".missed").text(value);
    
    var costValue = parseFloat(value) + 1498;    
    $(".cost").text(costValue);
    
     var diffValue = parseFloat(costValue) - originalvalue;     
    $(".remaining").text(diffValue);
 }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- enter an amount - default 1000 -->
<input type="text" class="skillcount" name="skillcount" value="1000"/>

<p>
<!-- that ammount from skillcount divided by 2 and added into '.missed' -->
Missed: £
<span class="missed"></span>
</p>

<p>
<!-- Take output value of the paragraph '.missed' and + 1498 to it -->
True Cost: £
<span class="cost"></span>
</p>

<p>
<!-- Value of skillcount 'minus' value of the paragraph '.cost' -->
Remaining: £
<span class="remaining"></span>
</p>

edited Nov 7, 2017 at 16:35

answered Nov 7, 2017 at 15:47

Rohit Kumar

1,8102 gold badges14 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

John Over a year ago

Thanks, got it working for the first bit dividing by 2. Doesn't seem to work it out as i type or even divide the default value? Sorry, I am a newbie to this!

John Over a year ago

Hi, yes ive just worked it all out and its great the only one i changed was the /2 it should have been *2 instead. The only thing that would be great would be if it could work out the default value as you come to the page and also as you type it changes the values? Thank you very much for your help! Really appreciated!

John Over a year ago

Sorry, if skillcount is 1000, missed should be 2000. jsfiddle.net/6as9gef0/4 other figures look good

John Over a year ago

Great, thanks, would it work updating the values as you type, like keychange, you so see it instantly?

Rohit Kumar Over a year ago

It will work if we add a .keyup() event....check this updated jsfiddle sir .. jsfiddle.net/6as9gef0/7

|

Bijan Rafraf · Accepted Answer · 2017-11-07 15:51:52Z

1

You are very close.

In the line:

$(".missed").append('value');

remove the quotes from around 'value'. You are appending a string here instead of the variable.

$(".missed").text(value);

you can also use .html(value)

answered Nov 7, 2017 at 15:51

Bijan Rafraf

3811 silver badge7 bronze badges

Comments

Suaro · Accepted Answer · 2017-11-07 16:12:35Z

Ok, if you want to change inmediatly, i recommend change .on('change',..) to .on('input',..). (If you want to change on "submit", write .on('change,..)

In other hand, change .append to .text.

Sample code:

 <!DOCTYPE html>
    <html>
    <head>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
    </script>
    <script text="text/javascript">

    $(document).on('ready',function(){
         $('.skillcount').on('input',function() {
             var valueMissed = parseFloat($(this).val()) / 2;
             alert(valueMissed );
             $(".missed").text(valueMissed);

             var valueCost = valueMissed + 1498;
            alert(valueCost );
            $(".cost").append(valueCost);

            var valueRemaining = parseFloat($(this).val()) - valueCost 
            alert(valueRemaining );
            $(".remaining").append(valueRemaining );
    });
    </script>


    </head>
    <body>
    <!-- enter an amount - default 1000 -->
    <input type="text" class="skillcount" name="skillcount" value="1000" />

    <p>
      <!-- that ammount from skillcount divided by 2 and added into '.missed' -->
      Missed: £
      <span class="missed"></span>
    </p>

    <p>
      <!-- Take output value of the paragraph '.missed' and + 1498 to it -->
      True Cost: £
      <span class="cost"></span>
    </p>

    <p>
      <!-- Value of skillcount 'minus' value of the paragraph '.cost' -->
      Remaining: £
      <span class="remaining"></span>
    </p>

    </body>
    </html>

Collectives™ on Stack Overflow

jQuery update div with value of input onChange

3 Answers 3

7 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

7 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related