Hide or show different DIV based on numerical value of input field

Question

I have a form where depending on the value of the #balance field i want a certain div to show. If the #balance field is a number greater than one i want to show the div #moreassets but if the #balance field is a negative number i want it to show the div #moreliabilities.

This script below works calculating the value of two previous fields in the same form but when i try and add further or a separate or second peice of js code for the show hide function i get stuck.

I have tried numerous methods but can't seem to get it to work. Im not great at this kind of stuff, but im assuming that perhaps my issue is that i am already using #balance in the DOM or whatever so cant use the same thing twice?

I was wondering if anyone could point me in the right direction or what i would need to add to the below script / code to make this happen?

<label style="margin-top: 20px;">Your Balance: </label>

<input class="form-control text-center balance" id="balance" type="type" name="balance">

<script>
  $(function() {
    $('#assets2, #liabilities').change(function() {
      var yourassets = parseFloat($('#assets2').val()) || 0;
      var yourliabilities = parseFloat($('#liabilities').val()) || 0;
      $('#balance').val(yourassets - yourliabilities);
    });
  });

</script>

<div id="moreliabilities" class="callout">
  <p>Personal liabilities, such as credit cards and loans, can be expensive and you should consider making overpayments before investing.</p>
</div>

<div id="moreassets" class="callout">
  <p>You have more assets than liabilities.</p>
</div>

Answer 1

you can use toggle and pass boolean expression as per difference value. see below code

 $(function() { $('#assets2, #liabilities').change(function() { var yourassets = parseFloat($('#assets2').val()) || 0; var yourliabilities = parseFloat($('#liabilities').val()) || 0; var diff = yourassets - yourliabilities; $('#balance').val(diff); $('#moreassets').toggle(diff>0); $('#moreliabilities').toggle(diff<0); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input class="form-control text-center" id="assets2" type="type" name="assets2"><br> <input class="form-control text-center" id="liabilities" type="type" name="liabilities"><br> <label style="margin-top: 20px;">Your Balance: </label> <input class="form-control text-center balance" id="balance" type="type" name="balance"> <div id="moreliabilities" class="callout"> <p>Personal liabilities, such as credit cards and loans, can be expensive and you should consider making overpayments before investing.</p> </div> <div id="moreassets" class="callout"> <p>You have more assets than liabilities.</p> </div>