Multiplying Textbox Values in Javascript

Question

I'm trying to multiply a number from a textbox with other values through a function with parameters. For some reason I keep getting "NaN" as a result.

Here's a watered down version of the code:

function calculate(a, b, c, d) {
  var num1 = a * b;
  var num2 = num1 * a;
  document.write(num1);
  document.write(num2); 
}

<input type="number" id="apple" min="0" value="0">
<input type="button" onclick="calculate('apple','1.99','2','5')" value="Add to Order">

The document.write lines are just there for test purposes. I just don't know why num1 and num2 give back "NaN". Also, I've tried doing a.value and b.value to no avail.

If a is apple, then you try to multiply apple with 1.99. How would that become a number. Also all your numbers are strings. Remove the quotes from them. Perhaps you mean var num1 = document.getElementById(a).value*b which will multiply the value of your number with the price — mplungjan
– mplungjan, Commented Jun 22, 2016 at 9:43
Value you pass for argument is 'apple' which is a string. When u multiply a string with a number you get nothing but a 'NaN'. — Oshadha
– Oshadha, Commented Jun 22, 2016 at 9:43
as @Oshadha mentioned and because num1 = NaN then num2 will be NaN too, because you multiple num1 which is NaN with apple which is string and then num2 will return NaN too — pes502
– pes502, Commented Jun 22, 2016 at 9:44

Liam · Accepted Answer · 2016-06-22 09:49:44Z

1

You are using the String 'apple' which cannot be multiplied. What you need in this case is getting the value inside the input field:

var appleVal = document.getElementById('apple').value;

or use 'a' variable instead:

var appleVal = document.getElementById(a).value;

Tip: Use parseFloat function to try to make a number of a string:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/parseFloat

edited Jun 22, 2016 at 9:49

Liam

30k28 gold badges143 silver badges206 bronze badges

answered Jun 22, 2016 at 9:47

Erwin Moller

2,40816 silver badges23 bronze badges

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

Comments

José M. Carnero · Accepted Answer · 2016-06-22 09:48:40Z

0

'apple' is only text, you need to pass:

document.getElementById('apple').value.

In your code:

onclick = "calculate(document.getElementById('apple').value,'1.99','2','5')"

answered Jun 22, 2016 at 9:48

José M. Carnero

2631 silver badge8 bronze badges

3 Comments

Liam Over a year ago

don't pass strings to represent integer values, change '1.99' to 1.99, etc.

José M. Carnero Over a year ago

I don't want to change the original code more than to propose a solution. But I think so is better to pass numbers as numbers. Thanks @Liam.

mplungjan Over a year ago

or just use document.getElementById(a).value in the calculate

Vallabh Bothre · Accepted Answer · 2016-06-22 09:59:18Z

0

Try this,

<input type="number" id = "apple" min = "0" value = "0">
<input type="button" onclick = "calculate(1.99,2,5)" value = "Add to Order">

<script>
function calculate(b,c,d){
var a = document.getElementById("apple").value;
var num1 = a*b;
var num2 = num1*a;
document.write(num1);
document.write(num2); 
}
</script>

Your mistake is, you are multiplying "apple" string with number.

edited Jun 22, 2016 at 9:59

answered Jun 22, 2016 at 9:54

Vallabh Bothre

6615 silver badges8 bronze badges

Collectives™ on Stack Overflow

Multiplying Textbox Values in Javascript

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related