Javascript not taking value of input number [duplicate] - javascript

This question already has answers here:
How to make a document.getElementById value into an integer variable, not a string?
(6 answers)
Using <form> and <input> elements as an input for JavaScript code. Is this the best way to do this?
(2 answers)
Closed 8 years ago.
I'm making a programme in javascript where a user has to enter numbers, and the computer will do calculations for them based on the numbers.
However, when I'm programming Javascript to add two inputted numbers, its simply placing them next to each other and not adding.
for example, when it has to add 4 + 4, the output is 44, not 8.
<form>
<p> Give side 1</p>
<br>
<input type="number" id="side1">
<br><br>
<p> Give side 2</p>
<br>
<input type="number" id="side2">
<br><br>
<p> Give side 3</p>
<br>
<input type="number" id="side3">
<br><br>
<button type="button" onClick="my()"> Calculate</button>
<p id="sum"></p>
</form>
</center>
<script type="text/javascript">
function my() {
var a= document.getElementById("side1").value;
var b= document.getElementById("side2").value;
var c= document.getElementById("side3").value;
var d= a + b + c;
document.getElementById("sum").innerHTML="The are o the triangle is " + "" + d;
}
</script>

This is working. You just have to use parseInt:
function my() {
var a = parseInt(document.getElementById("side1").value, 10);
var b = parseInt(document.getElementById("side2").value, 10);
var c = parseInt(document.getElementById("side3").value, 10);
var d = a + b + c;
document.getElementById("sum").innerHTML = "The are o the triangle is " + "" + d;
}
fiddle
Ref:
parseInt()

the value you get from document.getElementById("").value is type of String.
to sum up, you have to change it to int,
while there are many way to do this.
var a= document.getElementById("side1").value - 0
or
var a= parseInt(document.getElementById("side1").value)
(this one is suggested for case of invalid input)
or
var a= document.getElementById("side1").value * 1;

Related

Calculator on HTML/CSS/Javascript

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.

How do I pass Text Field values in a Java Script function? [duplicate]

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>

Javascript calculation from form data returns NaN

I'm fairly new to JS and I think there's a problem with my code in the parts where I'm using Javascript for arithmetic. If someone could show me where I went wrong I'd be very grateful! Currently, everything works except it returns NaN when the calculate button is clicked.
HTML:
<form>
AGE:<br><input id="Age" data-wrapper-class="inputBox" type="text" name="Age"><br>
</form>
<form>
HEIGHT (FEET):<br><input id="Feet" data-wrapper-class="inputBox" type="text" name="Feet"><br>
</form>
<form>
HEIGHT (INCHES):<br><input id="Inches" data-wrapper-class="inputBox" type="text" name="Inches"><br>
</form>
<form>
WEIGHT (POUNDS):<input id="Pounds" data-wrapper-class="inputBox" type="text" name="Pounds"><br>
</form>
<button id="calcButton" class="ui-btn ui-btn-b">Calculate BMR</button>
</div>
<div id="resultsInfo">
<p id="results"></p>
</div>
Javascript / jQuery:
$("#calcButton").click(function() {
var age = document.forms["Age"];
var feet = document.forms["Feet"];
var inches = document.forms["Inches"];
var wip = document.forms["Pounds"];
var feetInches = feet * 12;
var heightInches = feetInches + inches;
var weightMen = 6.23 * wip;
var heightMen = 12.7 * heightInches;
var ageMen = 6.8 * age;
var one = 66 + weightMen;
var two = one + heightMen;
var menBMR = two - ageMen;
$("#Calculator").hide();
parseFloat(document.getElementById("results").innerHTML = menBMR);
$("#resultsInfo").show();
});
As Jaromanda mentioned, you need to ensure the values are actually a Number value. Once they're a number type then you can do arithmetic operations on them. Here's why this matters:
var str = "12" // Number value
var num = 12 // String value
console.log(str * 2) // 1212
console.log(num * 2) // 24
In your code example, it looks as if you used inputs that are gathering the type="text" which means the values that you get from it would give you a String value. You can convert them to a number using parseInt or parseFloat, or you can change the HTML input type to type="number", I believe.

javascript function Math.pow taking decimal value from an input text

I searched a lot on the web on this, but I've not found anything that would help me.
I did this:
montante <input type='text' id='A' onkeyup='calcola()' value='15000' /><br />
tasso <input type='text' id='i' onkeyup='calcola()' value='0.07' /><br />
anni <input type='text' id='n' onkeyup='calcola()' value='6' />
<script>
var A = document.getElementById('A').value;
var n = document.getElementById('n').value;
var float i = document.getElementById('i').value;
var R = A / ((1 - Math.pow((1 + i), -n)) / i);
document.write(R);
</script>
This works well if you declare the three variables normally, but if you take the values from an input the script does not give the correct answer...
I think the problem is in the function Math.pow that does not recognize the "i" var as a number cause of the dot in the input...
I need this working with the inputs, any help?
Thanks in advance
The type of the value that is read from your html input-elements will be determined by javascript as a String.
If you use the + operator on a variable of type number and a variable of type String, Javascript will perform a string-concatenation:
var a = "1";
var b = 2;
var c = a + b;
Var c will get the value: "12"
To prevent this behavior you have to to parse the value of your input first. You can do this by using the Javascript parseFloat() function.

Javascript calculation letters and numbers

<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.

Categories