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.
Related
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.
I feel like I'm a novice again. I thought I was long past these problems. below is a simple script with two function neither of which work. What am I missing. Any help appreciated.
function calculator() {
var bee = document.getElementById("beerPerc").value;
var win = document.getElementById("winePerc").value;
var liq = 100 - (bee + win);
document.getElementById("liquorPerc").value = liq;
}
function calculator2() {
document.getElementById("liquorPerc").value = parseInt(100 - (document.getElementById("beerPerc").value + document.getElementById("winePerc").value))
}
<div id="calcArea">
<div>
<input type="number" id="beerPerc" value="50" onkeyup="calculator2()"> % of Beer Drinkers<br>
<input type="number" id="winePerc" value="30" onkeyup="calculator2()"> % of Wine Drinkers<br>
<input type="number" id="liquorPerc" onkeyup="calculator2()"> % of Liquor Drinkers<br>
</div>
</div>
Two things:
Case is significant. If you declare the variable bee, you can't read it with Bee.
.value is always a string. You need to convert the strings to numbers:
var bee = Number(document.getElementById("beerPerc").value);
If you don't do this, + will perform string concatenation, not addition.
You don't need to call parseInt() on the result of a numeric calculation, that's always a number.
function calculator2() {
document.getElementById("liquorPerc").value = 100 - (parseInt(document.getElementById("beerPerc").value, 10) + parseInt(document.getElementById("winePerc").value, 10)))
}
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;
spent 45min trying figure why it returns NaN, please point me to the right direction.
My code is:
<form name="calc">
<input type="text" value="0" name="first" onchange="add()">
<input type="text" value="0" name="second" onchange="add()">
<input type="text" name="result" onchange="add()">
</form>
<script type="text/javascript">
var a = parseInt(document.calc.first.value);
var b = parseInt(document.calc.second.value);
var c = a + b;
function add(){
document.calc.result.value = parseInt(c);
}
</script>
You're looking for:
function add() {
var a = parseInt(document.calc.first.value, 10);
var b = parseInt(document.calc.second.value, 10);
var c = a + b;
document.calc.result.value = c;
}
You have to re-read a and b values each time they're changed.
Note 1: Also, remember about radix parameter in parseInt(val, radix). It's 10 in your case (as I suppose). See this MDN article on why that's important.
Note 2: no need to call parseInt(c), because c is already of the type number.
a and b are calculated once at page load, when the form is still empty, obviously the result will be NaN.
Put all the logic in the add function, so you retrieve the current state of the form.
<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.