How to use .toFixed() from an input field - javascript

I can't seem to understand why I can't get .toFixed() to work in my code. I've tried different variations but something is missing.
I get the following error upon running the code.
Uncaught TypeError: document.getElementById(...).value.toFixed is not
a function
My Code:
<input type="number" id="num1">
<p>+</p>
<input type="number" id="num2">
<p>=</p>
<p id="result"></p>
<br>
<button id="submit" onclick="calculate()">Calculate</button>
<script>
function calculate(){
const a = document.getElementById("num1").value;
const b = document.getElementById("num2").value;
let finalAnswer = a.toFixed(2) + b.toFixed(2);
document.getElementById("result").innerHTML = finalAnswer;
console.log(a);
}
</script>

toFixed is defined in Number as you can see in the documentation therefore you must first convert the input values to numbers before using it.
For that you can use the Number constructor passing it the text to convert:
let myNumber = Number(someString);
After that you can output the result with toFixed() which gives you a string with as many digits after the decimal point as the number you passed to it:
console.log(myNumber.toFixed(2));
Taking all of this into consideration you can change your code to:
function calculate() {
const a = document.getElementById("num1").value;
const b = document.getElementById("num2").value;
//Convert both inputs to Number's before adding them
let finalAnswer = Number(a) + Number(b);
//toFixed only here when you need to output it
document.getElementById("result").innerHTML = finalAnswer.toFixed(2);
console.log(a);
}
<input type="number" id="num1">
<p>+</p>
<input type="number" id="num2">
<p>=</p>
<p id="result"></p>
<br>
<button id="submit" onclick="calculate()">Calculate</button>

The .toFixed() is a method for numbers. When you get the value from a input, it is a string. Therefore you have to convert it to a number.
You can convert to number with:
Number()
So, your code should look something like this:
const a = Number(document.getElementById("num1").value); const b = Number(document.getElementById("num2").value);

That's because your input gets evaluated as a string and not as a number, this is one of the multiple ways i'd solve it:
const a = document.getElementById("num1").value - 0;
const b = document.getElementById("num2").value - 0;

Hi you can use step for float range ether.You cant use:
<input type="number" step=any
To float I recomend to setting 0.01.

Related

Adding 1 incrementally to a string with numbers

$("#next").click(function() {
var text = $("#textbox").val();
var Numbers = text.substring(4, 8); //To get the 4 numbers
var Num = parseInt(Numbers, 10); //To convert to an integer?
var Add = +(Num).val() + 1; //Increment 1?
$("#textbox").val(Add); //Output final value
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" id="next" value="Increment" />
<br/>
<input type="text" id="textbox" value="ABC-123" />
I have a text box with a string of "ABC-1234" as the value and a button. I'm trying to add 1 to what's entered in the text box every time I click the button. I'm fairly new to programming but this is what I've come up with, which ends with the result of NaN.
The problem you want to solve is to add one to the numeric part of a mixed alpha-then-numeric text string.
Assuming your text will contain an alpha part, then a literal dash -, and finally a numeric part, it is easy to extract the numeric part using the String.split() method.
var text = $("#textbox").val();
var parts = text.split('-');
Now parts[0] is everything to the left of the dash and parts[1] is everything to the right. Just parse that into a number, add one, and add it back with the rest of the text, placing it back in the field.
$("#next").click(function() {
var text = $("#textbox").val();
var parts = text.split('-'); // Get the numbers in parts[1]
var num = parseInt(parts[1], 10); // Convert to an integer
num++; //Increment 1?
$("#textbox").val(parts[0] + '-' + num); //Output final value
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" id="next" value="Increment" />
<br/>
<input type="text" id="textbox" value="ABC-123" />
This is more flexible than text.substring(4, 8); because it will work with any length string and any length number, as long as there is a dash between them.
your code is almost right, but you have to change a few things to make it "right":
in dependency of the naming convention of javascript write the variables in lower(Camel)Case.
parseInt returns a primitive type of number. There is need for calling val() method on it! There is no function like that. Just use the variable itself
you have to prepend your increased number with the letters you chop of at the beginning.
All in all:
$("#next").click(function(){
var text = $("#textbox").val();
var numbers = text.substring(4); //To get all the numbers
var num = parseInt(numbers, 10); //To convert to an integer?
num = num + 1; //Increment 1?
$("#textbox").val(text.substring(0,4)+num); //Output final value
});

javascript (+) sign concatenates instead of giving sum? [duplicate]

This question already has answers here:
Adding two numbers concatenates them instead of calculating the sum
(24 answers)
Closed 5 months ago.
I created a simple program that make the sum of two numbers BUT..
the program is concatenating instead, This is so confusing!
Can anyone help?
function calculate() {
var numberOne = document.querySelector(".first").value;
var numberTwo = document.querySelector(".second").value;
var sum = numberOne + numberTwo;
document.querySelector(".result").innerHTML = "The sum of the two numbers is : " + sum;
}
<!doctype html>
<html>
<body>
<p>Calculate sum of two numbers !</p>
Enter 1rst Number:<br>
<input type="number" class="first" placeholder=""><br><br> Enter 2nd Number:<br>
<input type="number" class="second" placeholder=""><br><br>
<input type="button" onclick="calculate()" value="calculate">
<p class="result"></p>
</body>
</html>
Here value gives you a string, hence the concatenation. Try parsing it as an Number instead:
var sum = parseInt(numberOne) + parseInt(numberTwo);
See the demo fiddle.
Javascript takes dom elements as string only by default. To make mathematical calculation, you need to typecast it to integer/float or convert to number.
parseInt(number) = number, truncates after decimal value
parseFloat(number) = number with decimal values
Number(number) = number with or without decimal
Your numberOne and numberTwo are strings, so you get concatenated strings when use + sign with two string.
Parse first to numbers then sum them. You can use parseInt() and parseFloat() functions for it.
var numberOne = '7';
var numberTwo = '8';
var sum = numberOne + numberTwo;
console.log(sum);
sum = parseFloat(numberOne) + parseFloat(numberTwo);
console.log(sum);
Use parseInt() for this, Check snippet below
function calculate() {
var numberOne = document.querySelector(".first").value;
var numberTwo = document.querySelector(".second").value;
var sum = parseInt(numberOne) + parseInt(numberTwo);
document.querySelector(".result").innerHTML = "The sum of the two numbers is : " + sum;
}
<p>Calculate sum of two numbers !</p>
Enter 1rst Number:<br>
<input type="number" class="first" placeholder=""><br><br>
Enter 2nd Number:<br>
<input type="number" class="second" placeholder=""><br><br>
<input type="button" onclick="calculate()" value="calculate">
<p class="result"></p>
Example , you can use this:
var numberOne:number = +document.querySelector(".first").value;
var numberTwo:number = +document.querySelector(".second").value;
var sum = numberOne + numberTwo;
You should use + Angular typeScript
It's just because value returns with string. So sum operation ends with concatenation.
you need to convert both those values.
user below code
var sum = parseFloat(numberOne) + parseFloat(numberTwo);
Who are using javascript in salesforce make sure
var a= 8 ;
var b =8 ;
var c = a+b;
This will give u result output = 88;
It is will just concatenate. If you want to add those two:
You should write logic as :
var a = 8;
var b = 8
var c = parseInt(a)+ parseInt(b);
This will give you the desired result of 16 , The same is the case with multiplication.
Hope this helps.

Adding multiple HTML form input values in JavaScript

I am bewildered as to why I cannot add three numbers together. Here is my HTML:
<div><label>Sales Price: </label>
<input type="number" name="sales_price" value="3">
</div>
<div><label>Incentives: </label>
<input type="number" name="incentives" value="2">
</div>
<div><label>Acquisition Fee: </label>
<input type="number" name="acq_fee" value="1">
Here is my JavaScript:
var salesPrice = document.getElementsByName("sales_price")[0];
var incentives = document.getElementsByName("incentives")[0];
var acqFee = document.getElementsByName("acq_fee")[0];
var netCapCost = salesPrice.value - incentives.value + acqFee.value;
I wanted a simple calculation to be done: (3-2+1) = 2. However, netCapCost returns 11, which is the concatenation of the result of (3-2) and 1. What did I do wrong? Many Thanks in advance!
You need to convert those values into numbers with parseInt() or else the + operator will be interpreted as string concatenation. You are doing
var netCapCost = salesPrice.value - incentives.value + acqFee.value;
Which is
var netCapCost = "3" - "2" + "1"
"3"-"2" will return 1, which is what you want but 1 + "1" will be concatenated into "11" since the right operand is a string. So Number + String -> concatenation
var salesPrice;
var incentives;
var acqFee;
var npc;
function calculate(e) {
var netCapCost = (parseFloat(salesPrice.value) - parseFloat(incentives.value) + parseFloat(acqFee.value)).toPrecision(3);
npc.value = netCapCost;
}
window.onload = function (){
salesPrice = document.getElementsByName("sales_price")[0];
incentives = document.getElementsByName("incentives")[0];
acqFee = document.getElementsByName("acq_fee")[0];
npc = document.getElementsByName("npc")[0];
salesPrice.onchange = calculate;
calculate();
};
Your problem is that text fields value is always of type STRING. When subtracting it forces a conversion to type FLOAT. Then the plus operation shares an opperator with the concatenate operation. So when you have two strings being added it concatenates rather than converting to FLOAT or INT. So basically you have "2"-"1" being converted to 2-1 as strings cannot be subtracted which gives you (1) then you have (1)+"1" which will concatenate rather than add as you have a string. Always use parseFloat or parseInt when expecting numeric data from user entry as it will always be a string when originally submitted.
you are doing a string concatation, all value get from input value are string,
the first calcuation salesPrice.value - incentives.value is currect is becuase, the - sign convert the incentives.value to number
the currect way is
var netCapCost = parseInt(salesPrice.value, 10) - parseInt(incentives.value, 10) + parseInt(acqFee.value, 10);
it's better to use a Math library to do the calcuation in javascript, because sooner or later, you will encounter the problem like 0.3 - 0.2 = 0.09999999
I think confusion here is HTML 5 introduces input type number however javascript engine doesn't introduce support for reading such specific fields. We end up using old traditional way of reading input field value which defaults everything to string.
Only advantage of using number type field would be that you do not have to worry about exception/erroneous situation where number is not being entered.
Other answer suggesting to use parseInt function, is the way to go unless you have luxury of introducing javascript framework like jQuery and use more sophisticated approach for reading it.

compare between input value with 0 trail

I found that when jQuery get a value with 0 (for example 100)trail, it will omit it. So if I compare 5>100, the result is true. So how do I solve this?
here is the HTML code:
<form id="target">
<input type="text" id="max" value="100"/>
<input type="text" id="number" />
<input id="submit" type="submit" value="submit" />
</form>
And here is jquery:
$('#target').submit( function() {
var a = $("#number").val();
var b = $("#max").val();
if( a > b){
alert("exceed limit");
}
return false;
});
Here you can see demo: http://jsfiddle.net/yqMGG/91/
You need to compare the numeric values, not the string values. The output of the .val() function is a DOMString value according to DOM Level 2 which says:
interface HTMLInputElement : HTMLElement {
...
attribute DOMString value;
...
}
so your (5 > 100) test is really "5" > "100" which is true since strings are compared lexicographically.
The solution is to change
if( a > b){
to
if(+a > +b){
The + prefix operator coerces its argument to a number.
Use parseFloat(), otherwise the values are considered as strings.
$('#target').submit( function() {
var a = parseFloat($("#number").val());
var b = parseFloat($("#max").val());
if( a > b){
alert("exceed limit");
}
return false;
});
See Demo
You can multiply it by 1 to convert it from string to number, or use parseInt
var a = $("#number").val() * 1;
OR
var a = parseInt($("#number").val(), 10);
the second parameter of parseInt function is the radix.

Addition operation issues?

Hi i'm trying to do simple addition of two numbers in javascript. When i'm trying to get the two input element values, the result is coming in a concatenation of two numbers
Here is the code:
<html>
<title>
</title>
<head>
<script type="text/javascript">
function loggedUser() {
//Get GUID of logged user
//alert('success');
var x, y , result;
x = document.getElementById('value1').value;
y = document.getElementById('value2').value;
result=x+y;
alert(result);
document.getElementById('res').value = result;
}
</script>
</head>
<body>
<input type="text" id="value1"><br>
<input type="text" id="value2"><br>
<input type="text" id="res">
<input type="submit" value ="submit" onclick=loggedUser();>
</body>
</html>
The "+" operator is overloaded. If any of the parameters is a string, they are all converted to strings and concatenated. If the parameters are numbers, then addition is done. Form control values are always strings.
Convert the parameters to numbers first using one of the following:
x = Number(document.getElementById('value1').value);
or
x = parseInt(document.getElementById('value1').value, 10);
or
x = parsefloat(document.getElementById('value1').value);
or
x = +document.getElementById('value1').value;
or
x = document.getElementById('value1').value * 1;
and so on...
Oh, you can also convert it only when necessary:
result = Number(x) + Number(y);
etc.
The input fields contain strings. If you want to sum two numbers, you have to convert the strings to numbers before adding - otherwise you are just adding two strings. There are lots of ways to do that depending upon what you want to allow. Here's one:
var x, y , result;
x = Number(document.getElementById('value1').value);
y = Number(document.getElementById('value2').value);
result=x+y;
alert(result);
document.getElementById('res').value = result;
See it working here: http://jsfiddle.net/jfriend00/BWW2R/
document.getElementById('').value returns a string. You need to call parseInt on that to make it a number.
It's because x and y are actually strings, not numbers. The value field of the element is always a string, so x+y gives you the concatenation of x and y.
You can parse x and y as integers and add the result of the parsing: that will give you what you want.
The problem is when you take those values you are getting a string and in result you are doing a concatenation. You should use parseInt on both x and y like this:
x = parseInt(document.getElementById('value1').value);
y = parseInt(document.getElementById('value2').value);

Categories