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