I have a question regarding the add sign in JavaScript I'm a bit confused on this. I have this input text box which I will be input as 50 and it will add plus 50 . My result in adding the numbers which for example I input 50 the result is 5050 which is totally wrong. Can someone help me on this?
<!DOCTYPE html>
<html>
<head>
<title>activity 2</title>
<script type="text/javascript">
function computeSalary(){
var salaryData = document.form1.salary.value;
var salary1 = salaryData + 50;
document.form1.newSalary.value = salary1;
}
</script>
</head>
<body>
<form name="form1">
Enter the daily salary:
<input type="text" name="salary" /><br />
<input type="button" value="Compute" onClick="computeSalary();" /><br />
<br />
The new salary: <input type="text" name="newSalary" />
</form>
</body>
</html>
You can convert the string value you're getting, which is being concatenated to your value, to a number by simply adding a plus sign:
var salary1 = +salaryData + 50;
jsFiddle example
You have to convert the value you got from the input control to float or integer before adding it using the + operator. The + operator will convert both operands to a same type before adding both operands. This is the primary reason why you got 5050 because the 50 of type int got converted to string.
use this code:
function computeSalary(){
var salaryData = document.form1.salary.value;
var salary1 = parseFloat(salaryData) + 50;
document.form1.newSalary.value = salary1;
}
Change the following line:
var salary1 = parseInt(salaryData) + 50; // Use parseInt or parseFloat
The reason is that JavaScript will coerce strings and integers into strings. So your integer 50 is converted to a string and then concatenated.
Related
Hello I have been struggling to learn HTML CSS and JAVASCRIPT. I have never tried and don't know basics exactly and I want to create a calculator and even for the basics I did simple example of x+1/2 and the answer I get is wrong here is the code
function result() {
var x = document.getElementById("constant").value;
var y = document.getElementById("height").value;
var z = document.getElementById("freq").value;
var c = 3 * 10 ** 8;
var k = x + 1;
var k2 = k / 2;
document.getElementById("Calculate").value = k2;
}
<!DOCTYPE html>
<html>
<head>
<h1>Microstrip Calculator</h1>
<p>Enter the following values in numeric form:</p>
</head>
<body>
<form>
Di-Electric Constant: <input class="text" Placeholder="Enter Value" id="constant" </input>
<br> Di-Electric Height: <input class="text" Placeholder="Enter Value" id="height" </input>
<br> Operational Frequency: <input class="text" Placeholder="Enter Value" id="freq" </input>
<br>
<br>
<input type="text" id="Calculate" </input>
<input type="button" value="Calculate" onclick="result()">
</form>
<br/>
</body>
</html>
Keep in mind that input value is always a string. And if you add to a string, you get a concatenated string, i.e.:
'1' + 1 === '11'
Convert your input values to numbers to make them behave like... well, numbers:
var x = Number(document.getElementById("constant").value);
var y = Number(document.getElementById("height").value);
var z = Number(document.getElementById("freq").value);
Inputs from a forms are always strings. To illustrate this, here is a small example:
a = "2"
b = "3"
console.log(a + b)
// but after convert string to int with the JS Function Number()
console.log(Number(a) + Number(b))
This means, you have to convert all input from your form to numbers first.
This question already has answers here:
Addition operation issues?
(5 answers)
Closed 5 years ago.
I am new to java script, I have three text fields with ids text1, text2, text3 respectively. I want to input values in 2 of them and print the sum in the third.
my code looks like this please tell me, what am I doing wrong.
it is adding them as string not numbers.
Also I want to make it like, if I enter value in any 2 of the three boxes. The other one adjusts itself.
EX: '__' + 5 = 7 => ' 2 ' + 5 = 7
will it work if I put variables in value attribute. if So then How?
<html>
<head>
<script>
function myCalculator(a, b) {
c = a + b;
document.getElementById("text3").value = c;
}
</script>
</head>
<body>
<p>
<h1>Calculator</h1>
<input type="text" value="" id="text1"></input> + <input type="text" value="" id="text2"></input> = <input type="text" value="" id="text3"></input>
<input type="button" value="ADD" onclick='myCalculator(document.getElementById("text1").value,document.getElementById("text2").value)'></input>
</p>
</body>
</html>
Use the Number() to convert the strings to numbers. Anything inside a text input.value will initially be a string.
function myCalculator(a, b) {
var c = Number(a) + Number(b);
document.getElementById("text3").value = c;
}
You need to call parseInt(text) on both parameters of myCalculator function to convert them to numbers first.
function myCalculator(a,b){
a = parseInt(a, 10); // convert to integer first
b = parseInt(b, 10);
c=a+b;
document.getElementById("text3").value = c;
}
The second parameter of parseInt function is radix, which needs to be 10 to read numbers in decimal system. It is 10 by default from ES5.
Replace Your Code this with text block , First remember to pass id in quotes and second format your value from string to javascript before adding.
<html>
<head>
<script>
function myCalculator(a,b){
var c=parseInt(a)+parseInt(b);
document.getElementById('text3').value = c;
}
</script>
</head>
<body>
<p>
<h1>Calculator</h1>
<input type="text" value="" id="text1"></input> + <input type="text" value="" id="text2"></input> = <input type="text" value="" id="text3"></input>
<input type="button" value="ADD" onclick='myCalculator(document.getElementById("text1").value,document.getElementById("text2").value)'></input>
</p>
</body>
</html>
There is an input field, like this,
<input class="form-control" type="number" name="recieved_by_quantity" id="quantity" />
Dynamically, a value is assigned to the input tag, like this,
document.getElementById('quantity').value = qu; //var qu=11 lets say
Now, what i want is, if the user manually inputs a value greater than "qu", then the value would automatically change itself to "qu".
What i did for this is something like,
document.getElementById('quantity').addEventListener("change", function() {
var qc = this.value;
if(qc>qu) {
this.value = qu;
}
});
The strange thing that is happening is if i input any value from 2 to infinity, it is changing all of them to 11. Only value it does not change are 0,1,10,100,1000,10000 and so on..
I am completely confused. Please help.
Its simple, use parseInt to get actual number value of your text-area.
You are getting string by default.
this.value is giving you '11'
parseInt(this.value) is giving you 11.
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<input class="form-control" type="number" name="recieved_by_quantity" id="quantity" />
</body>
<script>
var qu = 11;
document.getElementById('quantity').value = qu;
document.getElementById('quantity').addEventListener("change", function() {
var qc = parseInt(this.value);
if(qc>qu) {
this.value = qu;
}
});
</script>
</html>
Use parseInt
var qc = parseInt(this.value)
This is the code:
<html>
<body>
<script>
function myFunction(var1,var2){
number=var1+var2
document.write(number)
}
</script>
<form>
Number 1 : <input type="text" name="no1"><br>
Number 2 : <input type="text" name="no2"><br>
<input type="button" onclick="myFunction(this.form.no1.value,this.form.no2.value)" value="submit">
</form>
<p id="demo></p
</body>
</html>
When I insert 10 for number 1 and 20 for number 2, the output is:
1020
But i want it to display 30.
What can i do?
**I have tried myFunction(10,20), the result is 30.
simply use parse the variable value to integer using parseInt() method or add "+"before to your variable name. Because variables var1 and var2 returning string. To calculate those variable values, you need to convert it as a integer.
using parseInt() method
number=parseInt(var1)+parseInt(var2)
use + before variable name to convert into integer,
number= +var1 + +var2
try this code,
<html>
<body>
<script>
function myFunction(var1,var2){
number = parseInt(var1) + parseInt(var2)
//another way number= +var1+ +var2
document.write(number)
}
</script>
<form>
Number 1 : <input type="text" name="no1"><br>
Number 2 : <input type="text" name="no2"><br>
<input type="button" onclick="myFunction(this.form.no1.value,this.form.no2.value)" value="submit">
</form>
<p id="demo"></p>
</body>
</html>
using parseInt() DEMO
using + before variable name DEMO
modify your function with parseInt like:
<script>
function myFunction(var1,var2){
number=parseInt(var1)+parseInt(var2);
document.write(number);
}
</script>
You were getting output like 1020 because by default data from the textbox is taken as text type, so we need to convert it to Number Type first, for that we are using parseInt(for explicit conversion)
Your javascript thinks you are appending strings... To make sure your javascript knows it's numbers your working with you need to convert it to that type.
<html>
<body>
<script>
function myFunction(var1, var2){
number = parseInt(var1, 10) + parseInt(var2, 10)
document.write(number)
}
</script>
<form>
Number 1 : <input type="text" name="no1"><br>
Number 2 : <input type="text" name="no2"><br>
<input type="button" onclick="myFunction(this.form.no1.value,this.form.no2.value)" value="submit">
</form>
<p id="demo"></p>
</body>
</html>
For more info about parseInt check this documentation.
Update your method to
function myFunction(var1,var2){
number=parseInt(var1) + parseInt(var2)
document.write(number)
}
As this.form.no1.value is returning a string, so both the numbers are concatenated as strings instead of summing up as numbers.
Two options:
Change your input tag to
<input type="button" onclick="myFunction(parseInt(this.form.no1.value, 10),parseInt(this.form.no2.value, 10))" value="submit">
OR
Change your JavaScript function to
function myFunction(var1,var2){
var number=parseInt(var1, 10)+parseInt(var2, 10);
document.write(number);
}
It is because the values you extract from your input fields are strings. When you add two strings, they are usually concatenated. Try looking at the javascript method parseIntas Evan suggests in the comments or look at parseFloatif you want to allow floats.
parseFloat docs
Your method would then look like this:
function myFunction(var1,var2){
number = parseFloat(var1) + parseFloat(var2)
document.write(number)
}
It's now just string concatenation. Please use "parseInt()" to get the result.
thanks.
Your not doing a calculation, you are appending two Strings. In order to calculate the mathematical answer for var1 + var2 you should parse them to Integers.
result = parseInt(var1) + parseInt(var2);
<SCRIPT Language = JavaScript>
function calculate() {
a = 12
b = eval(document.form.number.value)
c = 5J7S
d = (a + b + c)
alert(d)
}
</SCRIPT>
<FORM NAME = form>
Phone: <INPUT TYPE = text SIZE = 3 value ="">
-
<INPUT TYPE = text name = number SIZE = 3 value ="">
-
<INPUT TYPE = text SIZE = 4 value ="">
<P>
<Input Type = Button NAME = b1 VALUE = "Grab Code" onClick = calculate()
</FORM>
5JG7S (Fixed Value)
5+7=12 (Added both numbers from Fixed Value)
Phone number 123-456-7890
4+5+6=15 (Prefix added together)
12+15=27 (Added numbers from the Fixed Value and the numbers that were added from the prefix)
27+5JG7S=275JG7S (Those numbers were added to the beginning of the orginal Fixed Value)
Now this Script that I have:
a is the added numbers from the Fixed Value
b is the input from the form(phone number)
c is the Fixed Value
d is adding each one up so they will display the code as an alert.
Now, if I take out c and just add a and b it performs the addition, if c is in there, it stops the process and produces nothing.
My question is, how do we add the calculated number and append it to the beginning of the fixed value?
Also, the addition works, but not the way I want it to, I want to add the 3 numbers together, the javascript adds 456+12= 468
I know this is very simple code, I am not familiar with Javascript programming and I pretty much pieced together what I found from searching.
I hope this makes sense, if this is not possible I understand.
Thanks!
using parseInt on the values should help with the math. your results are currently inaccurate because the form values are strings: rather than adding numbers you are concatenating strings.
i changed your 'number' input to have an ID attribute, so that you can select with getElementById and replaced the eval call with a call to parseInt.
the value of c in the calculate function needs to be corrected though, not sure what you meant but that will generate an error.
other various HTML tidyness issues (nothing that would break, just easier to read IMHO).
<script type="text/javascript">
function calculate() {
var a = 12;
var b = parseInt(document.getElementById("number").value);
// var c = 5J7S;
var d = (a + b + c);
alert(d);
}
</script>
<form name="form">
Phone: <input type="text" size="3" value=""/>
-
<input type="text" name="number" id="number" size="3" value=""/>
-
<input type="text" size="4" value=""/>
<p>
<input type="button" name="b1" value="Grab Code" onclick="calculate()">
</p>
</form>
hope that helps! cheers.