The code below should calculate the Pythagorean theorem. However, if the user puts 3 and 4 in the input fields and presses the button, the result does not show up. Could you help me find what's wrong?
function compute(form){
A=eval(form.a.value)
B=eval(form.b.value)
with (Math){
C=sqrt(((pow(a,2)+pow(b,2))))};
form.result.value=C;
}
<form>
<pre>
This program will calculate the hypotenuse of a triangle
Side 1 <input type="text" name="a" size=15>
Side 2 <input type="text" name="b" size=15>
Hypotenuse <input type="text" name="result" size=15>
<input type="button" value="calculate" onclick="compute(this.form)">
</pre>
</form>
Javascript is case sensitive, so after defining A one cannot access it by the lower case a.
Replacing A with a lower case a works
function compute(form) {
a = eval(form.a.value)
b = eval(form.b.value)
with(Math) {
C = sqrt(((pow(a, 2) + pow(b, 2))))
};
form.result.value = C;
}
<form>
<pre>
This program will calculate the hypotenuse of a triangle
Side 1 <input type="text" name="a" size=15>
Side 2 <input type="text" name="b" size=15>
Hypotenuse <input type="text" name="result" size=15>
<input type="button" value="calculate" onclick="compute(this.form)">
</pre>
</form>
You used a in the calcule instead of A, the variable you created before. Javascript is case sensitive, so var test is different of var Test.
In your case, just replace:
with (Math){
C=sqrt(((pow(a,2)+pow(b,2))))};
To this:
with(Math){
var C = sqrt( ( (pow(A ,2)+pow(B, 2)) ) );
};
Also, you should search how to organize your codes, thats make these simplier error easy to fix and avoid.
<!DOCTYPE HTML>
<html>
<body>
<form>
<pre>
This program will calculate the hypotenuse of a triangle
Side 1 <input type="text" name="a" size=15>
Side 2 <input type="text" name="b" size=15>
Hypotenuse <input type="text" name="result" size=15>
<input type="button" value="calculate" onclick="compute(this.form)">
</pre>
</form>
<script>
function compute(form){
var A = eval(form.a.value);
var B = eval(form.b.value);
with(Math){
var C = sqrt( ( (pow(A ,2)+pow(B, 2)) ) );
};
form.result.value = C;
}
</script>
</body>
</html>
Related
This question already has an answer here:
Why am I getting "ReferenceError: getElementById is not defined"?
(1 answer)
Closed 1 year ago.
what's the problem in this code? I have tried and can't figure it out. I am a total newbie in HTML, JavaScript, and CSS.
I am wandering around the internet but I think I am missing something and its a small mistake. can you kindly help? I have to learn this for my upcoming projects
here is the code
function result() {
let a = getElementById("constant").value;
let b = getElementById("height").value;
let c = getElementById("freq").value;
let sum = Number(a) + Number(b) + Number(c);
document.getElementById("Calculate").value = sum;
}
<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/>
It is document.getElementById(). See: MDN WebDocs: document.getElementById().
The Document method getElementById() returns an Element object representing the element whose id property matches the specified string. Since element IDs are required to be unique if specified, they're a useful way to get access to a specific element quickly.
function result()
{
let a = document.getElementById("constant").value;
let b = document.getElementById("height").value;
let c = document.getElementById("freq").value;
let sum = Number(a) + Number(b) + Number(c);
document.getElementById("Calculate").value = sum;
}
<!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>
So I'm trying to make an area calculator for a trapezoid using html and js. My code is shown below, but for some reason I am not getting correct answers out of this. I suspect that is because the code is running the function more than once, but I'm not really sure.
function solveArea() {
var base1, base2, height, area;
base1 = document.getElementById("base1").value;
base2 = document.getElementById("base2").value;
height = document.getElementById("height").value;
area = ((base1 + base2) / 2) * height;
document.getElementById("area").value = area;
}
<form>
<input id="base1" type="number" placeholder="Base 1">
<input id="base2" type="number" placeholder="Base 2">
<input id="height" type="number" placeholder="Height">
<input id="area" type="number" readonly="" placeholder="Area">
<input id="calculate" type="button" value="Calculate" onclick="solveArea()">
<input type="reset" value="Clear">
</form>
You can use parseInt
function solveArea(){
var base1, base2, height, area;
base1= parseInt(document.getElementById("base1").value, 10);
base2= parseInt(document.getElementById("base2").value, 10);
height= parseInt(document.getElementById("height").value, 10);
area = ((base1 + base2) / 2)* height;
document.getElementById("area").value = area;
}
document.getElementById().value is a string, so when you use the + operator it will concatenate the two operands. In your case, you should convert strings to numbers (e.g. with the Number function):
function solveArea() {
let base1 = Number(document.getElementById("base1").value);
let base2 = Number(document.getElementById("base2").value);
let height = Number(document.getElementById("height").value);
let area = (base1 + base2) / 2 * height;
document.getElementById("area").value = area;
}
<form>
<input id="base1" type="number" placeholder="Base 1">
<input id="base2" type="number" placeholder="Base 2">
<input id="height" type="number" placeholder="Height">
<input id="area" type="number" readonly placeholder="Area">
<input id="calculate" type="button" value="Calculate" onclick="solveArea()">
<input type="reset" value="Clear">
</form>
your code is not running multiple times,
the problem is when you do
base1= document.getElementById("base1").value;
base2= document.getElementById("base2").value;
console.log(base1+base2)
and base1 = 1 and base2 = 1
then the output will be
11
So you are receiving the value as a string so just convert it to the number and your code will work fine.
function solveArea(){
var base1, base2, height, area;
base1= document.getElementById("base1").value;
base2= document.getElementById("base2").value;
height= document.getElementById("height").value;
area = ((+base1 + +base2) / 2)*height;
document.getElementById("area").value = area;
}
If you parse the input values as numbers using either parseFloat or Number then you should be bale to perform the basic arithmetic operations you need. Without parsing these numbers they were being treated as strings. The issue with parseInt in this regard is that it would prevent you from using numbers such as 5.25 for input ~ it would be treated as 5...
function solveArea() {
var base1, base2, height, area;
base1 = Number(document.getElementById("base1").value);
base2 = Number(document.getElementById("base2").value);
height = Number(document.getElementById("height").value);
area = ((base1 + base2) / 2) * height;
document.getElementById("area").value = area;
}
<form>
<input id="base1" type="number" placeholder="Base 1">
<input id="base2" type="number" placeholder="Base 2">
<input id="height" type="number" placeholder="Height">
<input id="area" type="number" readonly="" placeholder="Area">
<input id="calculate" type="button" value="Calculate" onclick="solveArea()">
<input type="reset" value="Clear">
</form>
Creating a code using JS that can solve and graph quadratics. The parts I'm having an issue with would be finding and reducing axis of symmetry and vertex.
I've attempted to do the Axis of Symm but it does not work. The html code is for the box i would like the Axis of Symm to show up in. Thanks all!
<tr>
<td>
<a>Axis of Symmetry</a></br>
<input id="Axis" type="text" readonly="readonly"></input>
</br>
<input type="button" value="Clear" onclick="cancel()"></input>
</td>
</tr>
<script>
//Axis of Symmetry//
var AOS= ((-b) / (2*a));
document.getElementById('Axis').value = AOS;
</script>
Incorrect Code to Fix
First of all, the <input> tag does not have a closing tag (you shouldn't have </input> - it doesn't exist). Secondly, when you want to break a line, you use the <br /> tag. </br> is not a valid tag.
Working with Javascript onclick
It looks like you would be best off making a function (I call it calculate below) to get the values for your quadratic equation and then display the result for the axis of symmetry. See the Javascript code below to see how I would implement this.
A Solution
Below is a working example on how to calculate the axis of symmetry. I've made a functional JSFiddle here if you would like to see this code in action.
HTML
<p>
Please provide real constants a, b, and c in the boxes
below corresponding to the quadratic equation a*x^2 + b*x + c
</p>
<span style="display:inline-block">
<label for="a" style="display:block;">a</label>
<input type="number" name="a" id="a" />
</span>
<span style="display:inline-block">
<label for="b" style="display:block;">b</label>
<input type="number" name="b" id="b"/>
</span>
<span style="display:inline-block">
<label for="c" style="display:block;">c</label>
<input type="number" name="c" id="c" />
</span>
<input type="button" value="Calculate" onclick="calculate()">
<br />
<br />
<tr>
<td>
<a>Axis of Symmetry</a><br />
<input id="Axis" type="text" readonly="readonly" value="">
<br />
<input type="button" value="Clear" onclick="cancel()">
</td>
</tr>
Javascript (put this in between <style> and </style>):
// Calculate axis of symmetry
function calculate(){
var a = document.getElementById('a').value;
var b = document.getElementById('b').value;
var c = document.getElementById('c').value;
if(isNaN(a) || isNaN(b) || isNaN(c)){
window.alert("Please enter valid numbers for a, b, and c.");
}
else{
var AOS= ((-b) / (2*a));
document.getElementById('Axis').value = AOS;
}
}
I'm exercising in javascript calculations using a combination of maths and variables and i'm finding a difficulty on using the right way parentheses. For example i want to do the following calculation [(4,95/ans2)-4,5]*100 where ans2 is a calculated variable. In the last field i get 45.000 and i should take - 4.046 ... if the input in the first and second fields was 2 + 2
<form name="Calcultor" Method="Get" id='form1'>First Number:
<input type="text" name="first" size="35" id="first">+ Second Number:
<input type="text" name="second" size="35" id="second">
<br>Answer:
<input type="text" name="ans" size="35" id="ans" />
<input type="text" name="ans2" size="35" id="ans2" />
<input type="text" name="ans3" size="35" id="ans3" />
<button type="button" onclick="Calculate();">Calculate</button>
</form>
<script>
function Calculate() {
var first = document.getElementById('first').value;
var second = document.getElementById('second').value;
var ans = document.getElementById('ans').value;
var ans2 = document.getElementById('ans2').value;
document.getElementById('ans').value = parseInt(first) + parseInt(second);
document.getElementById('ans2').value = 1.112 - 0.00043499 * parseInt(document.getElementById('ans').value) + 0.00000055 * Math.pow(parseInt(document.getElementById('ans').value), 2) - 0.00028826;
/* in the following line i can't figure how to use with a proper way parentheses to prioriterize the calculations with the way i mentioned in the example before the code snippet*/
document.getElementById('ans3').value = [( 4.95 / parseInt(document.getElementById('ans2').value)) - 4.5] * 100;
}
</script>
The issue was in this row: document.getElementById('ans3').value = [( 4.95 / parseInt(document.getElementById('ans2').value)) - 4.5] * 100;. You need to use () instead of [] for grouping and you also don't need to parseInt the value. Here is the working snippet:
function Calculate() {
var first = document.getElementById('first').value;
var second = document.getElementById('second').value;
var ans = document.getElementById('ans').value;
var ans2 = document.getElementById('ans2').value;
document.getElementById('ans').value = parseInt(first) + parseInt(second);
document.getElementById('ans2').value = 1.112 - 0.00043499 * parseInt(document.getElementById('ans').value) + 0.00000055 * Math.pow(parseInt(document.getElementById('ans').value), 2) - 0.00028826;
/* in the following line i can't figure how to use with a proper way parentheses to prioriterize the calculations with the way i mentioned in the example before the code snippet*/
document.getElementById('ans3').value = ((4.95 / document.getElementById('ans2').value) - 4.5) * 100
}
<form name="Calcultor" Method="Get" id='form1'>First Number:
<input type="text" name="first" size="35" id="first">+ Second Number:
<input type="text" name="second" size="35" id="second">
<br>Answer:
<input type="text" name="ans" size="35" id="ans" />
<input type="text" name="ans2" size="35" id="ans2" />
<input type="text" name="ans3" size="35" id="ans3" />
<button type="button" onclick="Calculate();">Calculate</button>
</form>
Quick newbie question, i'm sure it is simple to you, but i cant get my head around to figure out why my code wont work. Checked online, seems that i'm doing everything fine, but still wont work... All i'm trying to do, is to make simple calc and display that in diff field. I have tryed external and internal JS.
Here's my code:
<script type="text/javascript">
function calculate(){
var a = document.calculate.first.value;
var b = document.calculate.second.value;
var c = parseInt(a) + parseInt(b);
document.calculate.result.value = c;
}
</script>
<body>
<form name="calculate">
<input type="text" name="first" size="5">
<input type="text" name="second" size="5">
<input type="button" onclick="calculate()">
<input type="text" name="result" id="result" size="5">
</form>
</body>
Chrome says:
Uncaught TypeError: object is not a function (onclick)
Give a different name to the form and the onclick handler! Here is a test.
Here is the corrected code :
<html>
<head>
<script type="text/javascript">
function calculate(){
var a = document.getElementById('first').value;
var b = document.getElementById('second').value;
var c = parseInt(a) + parseInt(b);
document.getElementById('result').value = c;
}
</script>
</head>
<body>
<form name="calculateform">
<input type="text" id="first" size="5">
<input type="text" id="second" size="5">
<input type="button" onclick="calculate()">
<input type="text" id="result" id="result" size="5">
</form>
</body>
</html>
Its probably because you are using the same name for the form as for your js function.
Working example:
<html>
<head>
<script type="text/javascript">
function calculate(){
alert(document.calculatex.first.value);
var a = document.calculatex.first.value;
var b = document.calculatex.first.value;
var c = parseInt(a) + parseInt(b);
document.calculatex.result.value= c;
}
</script>
</head>
<body>
<form name="calculatex">
<input type="text" name="first" size="5"/>
<input type="text" name="second" size="5"/>
<input type="button" value="calculate" onclick="calculate();"/>
<input type="text" name="result" id="result" size="5"/>
</form>
</body>
Have a look into JQuery library (convenient for getting/setting field values).