CODEWITHSUNDEEP
javascriptjqueryhtmlcss
John
John

Reputation: 1797

jQuery update div with value of input onChange

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.

Upvotes: 1

Views: 3247

Answers (3)

Rohit Kumar
Rohit Kumar

Reputation: 1792

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>

Upvotes: 1

Suaro
Suaro

Reputation: 322

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>

Upvotes: 0

Bijan Rafraf
Bijan Rafraf

Reputation: 387

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)

Upvotes: 1

Related Questions