Can't get values from input via JavaScript

Question

I'm simply trying to take inputs from html input fields. The problem is, my function always evaluate the inputs to 0. What should I do my code to work as I expected (to take inputs from fields and pass them to my javascript functions). If there is alike answered questions asked before, please refer.

Please do not propose jQuery solutions - I can't follow its full of parantheses syntax.

P.S. Zeros on ternary, are just for avoiding NaNs. Nothing else.

<!DOCTYPE html>
<html>

<head>
  <title></title>
</head>

<body>

  <strong>Data</strong>
  <hr>Price:
  <input type="text" id="price" value="0">
  <br>Prepay:
  <input type="text" id="prepay" value="0">
  <br>Percent:
  <input type="text" id="percent" value="0">
  <br>Month:
  <input type="text" id="month" value="0" onchange="refactorTable('payment-plan')">
  <br>

  <hr>
  <strong>Table</strong>

  <table id="payment-plan" border="1">
    <thead>
      <tr>
        <td>Month</td>
        <td>Amount</td>
      </tr>
    </thead>
    <tbody>

    </tbody>
  </table>
  <script type="text/javascript">
    var Sum = parseInt(document.getElementById('price').value);
    var PrePayment = parseInt(document.getElementById('prepay').value);
    var Percent = parseInt(document.getElementById('percent').value);
    var Month = parseInt(document.getElementById('month').value);

     //console.log(Sum +" -- "+ PrePayment +" -- "+ Percent +" -- "+ Month);

    function monthlyPaymentPlan(Sum, PrePayment, Percent, Month) {

      var BigJohn = Sum - PrePayment;
      //console.log(BigJohn);
      var monthly = Math.ceil((BigJohn + BigJohn * Percent) / Month);
      return Month > 0 ? monthly : 0;

    }

    function lastMonth(Sum, PrePayment, Percent, Month) {
      return Month > 0 ? Sum - monthlyPaymentPlan(Sum, PrePayment, Percent, Month) * (Month - 1) : 0;
    }

    function refactorTable(tbl_id) {
      var table = document.getElementById(tbl_id).getElementsByTagName('tbody')[0];
      table.innerHTML = "";
      var i = 0;
      var rows = document.getElementById('month').value;
      rows = parseInt(rows);
      for (i = 0; i < rows - 1; i++) {
        table.insertRow(-1).innerHTML = "<td>" + (i + 1) + "</td><td>" + monthlyPaymentPlan(Sum, PrePayment, Percent, Month) + "</td>";
      }
      table.insertRow(-1).innerHTML = "<td>" + rows + "</td><td>" + lastMonth(Sum, PrePayment, Percent, Month) + "</td>";
    }
  </script>


</body>

</html>

You are reading the values before the user had a chance to change them. You need to get them when you need them, i.e. When refactorTable is called. — Felix Kling
– Felix Kling, Commented Nov 30, 2015 at 14:16

Robbert · Accepted Answer · 2015-11-30 14:17:02Z

3

You are getting the values when the page renders, instead of when the function is supposed to run. Place your assignments inside a function and call the function.

// Define the variables globally so they can be used in any function
var Sum;
var PrePayment;
var Percent;
var Month;

// Call this function to set the values of the global variables.
function getValues() {
    Sum        = parseInt(document.getElementById('price').value);
    PrePayment = parseInt(document.getElementById('prepay').value);
    Percent    = parseInt(document.getElementById('percent').value);
    Month      = parseInt(document.getElementById('month').value);
}

// Call the getValues function first to set the values and then continue on 
// with your function calculations.
function refactorTable(tbl_id) {
   getValues();
   // Do the rest...
}

answered Nov 30, 2015 at 14:17

Robbert

6,6226 gold badges37 silver badges64 bronze badges

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

Comments

nardnob · Accepted Answer · 2015-11-30 14:16:25Z

You need to get the values at the time the function is called. Right now you're getting the values on page load (which is 0).

function refactorTable(tbl_id) {
    var Sum        = parseInt(document.getElementById('price').value);
    var PrePayment = parseInt(document.getElementById('prepay').value);
    var Percent    = parseInt(document.getElementById('percent').value);
    var Month      = parseInt(document.getElementById('month').value);

    var table = document.getElementById(tbl_id).getElementsByTagName('tbody')[0];
    table.innerHTML = "";
    var i=0;
    var rows = document.getElementById('month').value;
    rows = parseInt(rows);
    for(i=0; i<rows-1; i++) {
        table.insertRow(-1).innerHTML = "<td>" + (i+1) + "</td><td>" + monthlyPaymentPlan(Sum, PrePayment, Percent, Month) + "</td>";
    } 
    table.insertRow(-1).innerHTML = "<td>" + rows + "</td><td>" + lastMonth(Sum, PrePayment, Percent, Month) + "</td>";
}

Mahesh Kamani · Accepted Answer · 2015-11-30 14:27:00Z

2

You have need to update input variable value on change of id="month" so you can get updated value.

var Sum = '';
var PrePayment = '';
var Percent = '';
var Month = '';
function inputsval() {
   Sum = parseInt(document.getElementById('price').value);
   PrePayment = parseInt(document.getElementById('prepay').value);
   Percent = parseInt(document.getElementById('percent').value);
   Month = parseInt(document.getElementById('month').value);
}
function refactorTable(tbl_id) {
   inputsval();
   //Your other code.....
}

answered Nov 30, 2015 at 14:27

Mahesh Kamani

887 bronze badges

Comments

Liam · Accepted Answer · 2015-11-30 14:18:15Z

1

var Sum        = parseInt(document.getElementById('price').value);

This is not defining a function, or a macro. This is a one-time calculation of a number, and it seems this is going to happen when the page starts up. So, it won't ever change from its first value (0).

You should probably move these declarations inside of refactorTable. Thankfully, you already have them set up to be passed as arguments.

edited Nov 30, 2015 at 14:18

Liam

30k28 gold badges143 silver badges206 bronze badges

answered Nov 30, 2015 at 14:16

Katana314

8,6052 gold badges31 silver badges36 bronze badges

2 Comments

marmeladze Over a year ago

is this only way to make these variables reactive?

Katana314 Over a year ago

No, but ultimately, getting the correct value each time you reference it is going to mean running most of the above line. If you like, you could retrieve document.getElementById('price') and store it as SumElement or SumNode; this will be an actual reference that constantly reflects the actual input element. You can retrieve value from that, and it should be correct each time.

Collectives™ on Stack Overflow

Can't get values from input via JavaScript

4 Answers 4

Comments

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related