How to calculate to variable in javascript and print them in the html page

Question

I try to get result from html table witch excepted only numbers i check them throw if statement if variable 1 bigger than variable 2 print content and that works good. Now i am trying in the if statement to print variable 1 - variable 2 but it doesn't wanna work.

Here is the snippet:

$(document).ready(function() {
  var vastInkomen = 0;
  $('.txtBox').keyup(function() {
    vastInkomen = 0;
    $('.txtBox').each(function() {
      var txtBoxVal = $(this).val();
      vastInkomen += Number(txtBoxVal);
    });
    $('#vastInkomen').val(vastInkomen);
    writeResult();
  });

  var vastLasten = 0;
  $('.vast_lasten').keyup(function() {
    vastLasten = 0;
    $('.vast_lasten').each(function() {
      var vastLastenVal = $(this).val();
      vastLasten += Number(vastLastenVal);
    });
    $('#vastLasten').val(vastLasten);
    writeResult();
  });

  function writeResult() {
    if (vastInkomen !== 0 && vastLasten !== 0) {
      if (vastInkomen > vastLasten) {
        $('#result').text("Some text and work good!") +
          vastLasten - vastInkomen;
      } else if (vastInkomen < vastLasten) {
        //$('#result-amount').console(vastInkomen -vastLasten);
        $('#result').text("some text and work good.");
      }
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<table>
  <tr>
    <td>content1</td>
    <td><input class="txtBox" type="number" name="content2" />
    </td>
  </tr>
  <tr>
    <td>content3</td>
    <td><input class="txtBox" type="number" name="content3" />
    </td>
  </tr>
  <tr>
    <td>content4</td>
    <td>
      <input class="txtBox" type="number" name="content4" />
    </td>
  </tr>
</table>

<table>
  <tr>
    <td>content</td>
    <td><input class="vast_lasten" type="number" name="content" /></td>
  </tr>
  <tr>
    <td>content1</td>
    <td><input class="vast_lasten" type="number" name="content1" /></td>
  </tr>
  <tr>
    <td>content2</td>
    <td><input class="vast_lasten" type="texnumber" name="content2" /></td>
  </tr>
</table>
<div class="col">
  <h3>Het resultaat is:</h3>
  <p id="result"></p>
</div>

I'm afraid it isn't too clear what you're trying to do here. You have three input fields of class vast_lasten and three of txtBox. - what should happend if the keys are released on one of them? (beside that - what does vastInkomen & vastLasten mean?) — obscure
– obscure, Commented May 1, 2019 at 10:13
vastInkomen & vastLasten are just names. i am trying to compare to the input fields in table one with table 2. and i call the tabel 1 class vastInkomen en table 2 class vastLasten. In the last function writeResult() i make the comparing and it works for the text but i want also get the result from table one (vastInkomen) - the result from table 2(vastLasten). thanks in advanced — mohamed gaber
– mohamed gaber, Commented May 1, 2019 at 10:42

Marten · Accepted Answer · 2019-05-01 13:27:43Z

1

This will work:

var result = vastLasten - vastInkomen;
$('#result').text("Some text and work good!" + result);

You can use .text() to set the content of an element, but everything should be within the parenthesis.

I added an extra variable result because you cannot use + and - both here; it will result in NaN as it will try to sum the values.

This works as well:

$('#result').text("Some text and work good!" + (vastLasten - vastInkomen));

edited May 1, 2019 at 13:27

answered May 1, 2019 at 12:56

Marten

1,3846 gold badges28 silver badges51 bronze badges

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

2 Comments

mohamed gaber Over a year ago

can i also add some text after the parenthesis so something like that. $('#result').text("Some text and work good!" + (vastLasten - vastInkomen) "some more text");

Marten Over a year ago

Yes you can, as long as you glue the strings together with +: $('#result').text("Some text and work good!" + (vastLasten - vastInkomen) + "some more text"); Read more about it: 2ality.com/2011/10/string-concatenation.html

Collectives™ on Stack Overflow

How to calculate to variable in javascript and print them in the html page

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related