javascript numbers from HTML Textbox

Question

I have 2 HTML textboxes and need to convert them to numbers so I can perform a calculation but I am just getting NaaN. My code is:

Where totalcost is html textbox and pg is also a html textbox

document.getElementById("totalcost").value = parseFloat(document.getElementById("pg").value) + parseFloat(document.getElementById("totalcost").value);

I want the totalcost box to be populated by "totalcost + pg" as it is a click and add cart system. Why Float, its for bitcoin.

Post a [mcve] in your question please, not just a single line of JavaScript. — j08691, May 11 '16 at 17:25
put your html codes as well. Or, make a simple snippet or jsfiddle — Mojtaba, May 11 '16 at 17:28

score 0 · Accepted Answer · answered May 11 '16 at 17:31

Try this:

// get the `pg` value and attempt to convert to a Number, otherwise default to 0.00
var pg = Number(document.getElementById("pg").value) || 0.00; 

// get the `totalcost` value and attempt to convert to a Number, otherwise default to 0.00
var totalCost = Number(document.getElementById("totalcost").value) || 0.00;

// update the `totalcost` element to include the sum of `pg` and `totalcost`
document.getElementById("totalcost").value = pg + totalCost

Added some comments to help explain each step.

score 0 · Answer 2 · answered May 11 '16 at 17:37

Lets do that:

function isNumeric(n) {
  
  /* http://stackoverflow.com/a/1830844/603774 */
  
  return !isNaN(parseFloat(n)) && isFinite(n);
}

function calc() {

  var
    d_1 = document.getElementById('d_1').value,
    d_2 = document.getElementById('d_2').value,
    result;
  
  /* Validation for d_1 */
  if (!isNumeric(d_1)) {
    
    alert('d_1 is not a number');
    
    return;
  }
  
  /* Validation for d_2 */
  if (!isNumeric(d_2)) {
    
    alert('d_2 is not a number');
    
    return;
  }
  
  result = +d_1 + +d_2;
  
  alert('Result: ' + result);
}

<input type="text" id="d_1"> + <input type="text" id="d_2"> <input type="button" value="calculate" onclick='calc()'>

score 0 · Answer 3 · answered May 11 '16 at 17:40

0

Use the unary plus operator with or conditional

document.getElementById("totalcost").value = (+(document.getElementById("pg").value) || 0) + (+(document.getElementById("totalcost").value) || 0);

answered May 11 '16 at 17:40

Shreevardhan

12,233
3
36
50

Why do you need the `|| 0` if you're using the `+`? `+ ""` is already equal to zero. – May 11 '16 at 17:45
`+""` is equal to `0`, but `+"abc"` is equal to `NaN`, that's why ` || 0` is required. – Shreevardhan May 11 '16 at 17:46

javascript numbers from HTML Textbox

3 Answers3