Using PHP variable in Javascript/Jquery Function

Question

I am creating an investment calculator that takes user input from six pages and stores them in PHP $_SESSION variables. On the final page i take the $_SESSION variables form PHP and JSON.parse them to Javascript like so:

var cash = parseInt(JSON.parse( '<?php echo json_encode($cash_flow); ?>'));

I then run the variables through a formula to find a score like so:

function SCORE( cash, comp, num_months) {
var total1 = (cash - comp )/( num_months*12);
var total2 = total1/2.5;
var total3 = total2*100;

var dvTotal = total3;

return dvTotal;

}

I then use JQuery to output the score to the DOM.

I then have a section with a display of each of the users original input with a + and - next to them allowing the user to update their original input.

$('#cashMinusBtn').click(function(){
$('#cashFlowOutput').html(cash-=1000);
var newCash = $('#cashFlowOutput').html();
SCORE( newCash );
$('#dvTestOut').html(scoreTotal);

Here is the HTML used to output the user data:

div class="container-fluid pro-table">
  <div class="row">
    <div class="col-md-12 tooltip-row">
      <h4>Increase or Decrease value of initial entry to see how your dv<strong>SCORE</strong> would be effected:</h4>
    </div>
  </div>

  <div class="row tooltip-display">
    <div class="col-md-2 outputBox">
        <p>Cash Flow</p><br>
        <p id="cashFlowOutput"></p><br>
        <button class="table-button" id="cashMinusBtn">-</button><button class="table-button" id="cashPlusBtn">+</button>


    </div>
    <div class="col-md-2 outputBox">

        <p>Purchase Price</p><br>
         <p id="purchaseOutput"></p><br>
         <button class="table-button" id="purchaseMinusBtn">-</button><button class="table-button" id="purchasePlusBtn">+</button>


    </div>
    <div class="col-md-2 outputBox">

        <p>Down Payment</p><br>
        <p id="downOutput"></p><br>
        <button class="table-button" id="downMinusBtn">-</button><button class="table-button" id="downPlusBtn">+</button>


    </div>
    <div class="col-md-2 outputBox">

        <p>Interest Rate</p><br>
        <p id="interestOutput"></p><br>
        <button class="table-button" id="interestMinusBtn">-</button><button class="table-button" id="interestPlusBtn">+</button>


    </div>
    <div class="col-md-2 outputBox">


        <p>Months Financed</p><br>
        <p id="monthsOutput"></p><br>
        <button class="table-button" id="monthsMinusBtn">-</button><button class="table-button" id="monthsPlusBtn">+</button>


  </div>
  <div class="col-md-2 outputBox">

      <p>Compensation</p><br>
      <p id="compOutput"></p><br>
      <button class="table-button" id="compMinusBtn">-</button><button class="table-button" id="compPlusBtn">+</button>


  </div>

I would like to grab the new data updated by the user via + or -, send it through the formula, and update the score displayed.

I have no problem grabbing the updated data with var newCash = $('#cashFlowOutput').html();

But i'm having trouble pushing the newCash back through the formula and updating the score.

I'll include the repo for this material, i understand that some of the work has vulnerabilities but it is still and work in progress on a local server: https://github.com/DLzer/YarmouthApp/blob/master/finalPage.php

This is my first serious attempt at an application so i'm unsure if i'm making a lot more work for myself than needs to be done. Any critiquing appreciated.

Answer 1

There are a number of things that could potentially be wrong here.

Starting off, this line is unnecessarily complex:

var cash = parseFloat(JSON.parse( '<?php echo json_encode($cash_flow); ?>'));

My assumption here is that $cash_flow is a number, since you're doing a parseInt on it. So you could just do this (Updated to use parseFloat as per Lawrence):

var cash = parseFloat('<?php echo $cash_flow; ?>');

Next, let's look at where you're changing the value

$('#cashFlowOutput').html(cash-=1000);
var newCash = $('#cashFlowOutput').html();

There's no need to use a dom element for this since you're just pulling the value right back out, you can do this instead:

var newCash = cash - 1000;

Then the final two lines:

SCORE( newCash );
$('#dvTestOut').html(scoreTotal);

Your SCORE function takes in 3 parameters, you're missing comp and num_months. Also, scoreTotal doesn't exist. I assume this is meant to be the result from the SCORE function, in which case you want it to look like this:

var comp = 10; // sample value
var num_months = 4; // sample value
var scoreTotal = SCORE( newCash, comp, num_months );
$('#dvTestOut').html(scoreTotal);

Answer 2

Your code in JQuery shown below has few glitches. Such as missing function arguments,closing bracket for the function, unassigned variable calls, etc.

$('#cashMinusBtn').click(function(){
$('#cashFlowOutput').html(cash-=1000);
SCORE( newCash );
$('#dvTestOut').html(scoreTotal);

It could be like this.

$('#cashMinusBtn').click(function(){
    num_months = 1; // temporary values
    comp = 1; // temporary values
    $('#dvTestOut').html(SCORE(parseFloat(<?php echo $cash_flow ?>) - 1000, comp, num_months));
});

function SCORE can also be modified if you do not want to pass the other 2 arguments as it was called in your code

SCORE( newCash );

You have to do as this

function SCORE(cash, comp = 1, num_months = 1) {
   var total1 = (cash - comp )/( num_months*12);
   var total2 = total1/2.5;
   var total3 = total2*100;
   var dvTotal = total3;
   return dvTotal;
}

where the default values for the arguments are 1, but if you want to change the values for every run then you have to use

SCORE(cash, comp, num_months)

But there is an exception here, if the user passes num_months = 0, then you will get a division by zero error. Hence you have to always check that, the denominator will never be equal to 0. If the denominator of a fraction is zero, the expression is not a legal fraction because it's overall value is undefined.