parseInt returns NaN - javascript

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.

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.

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.

getElementByID won't pass the values to variables

Javascript
function fn1(){
var a = document.getElementById("xa").value;
var b = document.getElementById("ya").value;
var c = document.getElementById("xb").value;
var d = document.getElementById("yb").value;
fn2(a,b,c,d);
}
HTML
<div align="center"><b>Digital Differential Analyzer</b><br /><br />
X0: <input type="text" id="xa"/>
Y0: <input type="text" id="ya"/>
XE: <input type="text" id="xb"/>
YE: <input type="text" id="yb"/>
<input id="button1" type="button" value="Submit" onclick="e.width = e.width;fn1();" /></div>
If I enter function1 as only the call to function2 with ready values (such as 0,0,300,300), it works fine, but when I try to get the variables with getElementById, nothing works, I tried to modify it a lot but still the same result, and it doesn't even show as an error
try:
fn2(+a,+b,+c,+d);
this will convert input values from string to int. your function is not working because you are passing string values to the funcrion.
it adds 0 to the variable a,b,c,d respectively and casts string to int
i.e. 0+a=a but now 'a' is int.
for more accuracy try with parseFloat()
function fn1(){
var a =parseFloat( document.getElementById("xa").value);
var b =parseFloat( document.getElementById("ya").value);
var c =parseFloat( document.getElementById("xb").value);
var d =parseFloat( document.getElementById("yb").value);
fn2(a,b,c,d);
}

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.

Reading numbers from inputs with JavaScript always returns NaN

I want to create a calculator which simply sums 2 fields up. But whatever I try it does not work. It also returns "NaN", also if I use parseInt().
Here's the code:
<script type="text/javascript" language="Javascript">
function doSum()
{
var a = document.getElementsByName("a").value;
var b = document.getElementsByName("b").value;
var sum = a + b;
document.getElementById("sum").value = sum;
}
</script>
<form action="" method="POST">
<br/>a:<br/>
<input type="text" name="a" onblur='doSum()' value="0" size="5" />
<br/>b:<br/>
<input type="text" name="b" onblur='doSum()' value="0" size="5" />
<br/>Ergebnis<br/>
<input type="text" id='sum' value='' size="50" disabled/>
</form>
Sorry for that noob question, but what I'am doing wrong?
Thanks for any help!
Give ids to your inputs and identify them uniquely using document.getElementById. Then, obtain their decimal int values using parseInt with the radix parameter set to 10 and display the result as you currently do.
<script type="text/javascript" language="Javascript">
function doSum()
{
var a = parseInt(document.getElementById("a").value, 10);
var b = parseInt(document.getElementById("b").value, 10);
var sum = a + b;
document.getElementById("sum").value = sum;
}
</script>
<form action="" method="POST">
<br/>a:<br/>
<input type="text" id="a" onblur='doSum()' value="0" size="5" />
<br/>b:<br/>
<input type="text" id="b" onblur='doSum()' value="0" size="5" />
<br/>Ergebnis<br/>
<input type="text" id='sum' value='' size="50" disabled/>
</form>
getElementsByName returns a list of elements and you'd have to refer to the one you want through an index, even if the list contains only one element.
getElementById on the other hand, returns an uniquely identified element, by its id.
use getElementById and give each of those an Id. getElementsByName returns an array. By the way.. it's not a bad question. It's a common error-- one that is addressed in a way by using jQuery which deals in wrapped sets.
getElementsByTagName returns a node list:
function doSum()
{
var a = document.getElementsByName("a")[0].value;
var b = document.getElementsByName("b")[0].value;
var sum = parseInt(a, 10) + parseInt(b, 10);
document.getElementById("sum").value = sum;
}
So you will need to index it. In addition in order not to do a string concate, parseInt with radix 10 is needed. Unless you plan to accept octal values in your calculator.
getElementsByName returns multiple elements, hence the plural Elements. You need to get the property of the first element found:
var a = document.getElementsByName('a')[0].value;
getElementsByName returns a NodeList: this is a set of all the elements found with that name. It is like an array in that you can use numeric indexes (like [0]) to access the elements found and in that there is a length property; no other array-like functionality is available.
Furthermore, the value property will always be a string if it is set. The + operator is the addition operator when the values are numbers; if they are strings, it is the concatenation operator. "1" + "2" is equal to "12" in Javascript. You need to use parseInt to convert them to numbers:
var a = document.getElementsByName('a')[0].value;
a = parseInt(a, 10); // parse as a number in base 10
Fields in JavaScript are all strings you need int, also .getElementsByName returns an array, you probably need the first element, so:
var a = parseInt(document.getElementsByName("a")[0].value, 10);
var b = parseInt(document.getElementsByName("b")[0].value, 10);
getElementsByName returns an array which gives you the wrong data type for what you are trying to do.
try:
function doSum()
{
var a = document.getElementById("a").value;
var b = document.getElementById("b").value;
var sum = a + b;
document.getElementById("sum").value = sum;
}
</script>
<form action="" method="POST">
<br/>a:<br/>
<input id="a" type="text" name="a" onblur='doSum()' value="0" size="5" />
<br/>b:<br/>
<input id="b" type="text" name="b" onblur='doSum()' value="0" size="5" />
<br/>Ergebnis<br/>
<input type="text" id='sum' value='' size="50" disabled/>
</form>
OK, two issues, your a fetching the valurs of a and b using getElementsByName which returns an array of values (since there could be many). Use getElementsById and put ids in the HTML.
Also the value properties will be strings so you will need to convert to numbers before doing your addition.
a and b are strings so :
function doSum()
{
var a = parseInt(document.getElementsByName("a").value);
var b = parseInt(document.getElementsByName("b").value);
var sum = a + b;
document.getElementById("sum").value = sum;
}

Categories