I need to create a simple triangle perimeter and area calculator working with browsers. I need a simple html javascript code where users input the 3 sides lenght and they receive the perimeter and area of the triangle.
Something like this but for triangle:
<html>
<head>
<title>Circle Area</title>
</head>
<body>
<script language="JavaScript">
function CalculateArea(){
var radius =document.form1.txtRadius.value;
document.write("<P>Circle Area is" + (radius * radius * Math.PI) + "</p>");
document.write("<P> The circumference of the circle is " + (2 * radius * Math.PI) + "</p>");
}
</script>
<form name=form1>
Enter the radius of the circle:
<input type="text" name="txtRadius" size=10>
<br>
<input type="button" value="Calculate" onClick='CalculateArea();'>
</form>
</script>
</body>
</html>
Can anybody help?
For perimeter:
function perimeter() {
var sideA = document.getElementById("sideA").value;
var base = document.getElementById("base").value;
var sideB = document.getElementById("sideB").value;
var perimeter = parseFloat(sideA) + parseFloat(base) + parseFloat(sideB);
var result = document.getElementById("result");
result.innerHTML = "Area is " + perimeter;
}
<span>Side A:</span>
<input id="sideA" type="text" size=10>
<span>Base</span>
<input id="base" type="text" size=10>
<span>Side B:</span>
<input id="sideB" type="text" size=10>
<br>
<input type="button" value="Perimeter" onClick='perimeter();'>
<p id="result"></p>
You can replace what is needed to replace to get the area of a triangle.
Related
Why this code won't run, what is wrong with it? When I try to run it, it just gives me a black page, I've ran it through a HTML validator and it says it's all good. If someone can help me I'd be very grateful.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> Area of circle </title>
</head>
<body>
<script type="text/javascript">
function CalculateArea(){
var r = document.getElementById('form1').value;
let p = document.getElementById('area')
var area = (r * r * Math.PI);
if (r%1 !=0 || r < 1) p.innerHTML = 'Please enter a whole number greater than 0';
else p.innerHTML = area;
}
<form id='form1'>
Type radient of circle:
<input type="text" name="txtr" size=10>
<br>
<input type="button" value="Calculate" onClick='CalculateArea()'>
<p id='area'></p>
</form>
</script>
</body>
</html>
new answer
so in the r variables is not more selecting the whole form
but the only input you need (in the html I assigned a new id for the input)
infact in js now is selecting the input, and getting the .value directly from there :)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> Area of circle </title>
</head>
<body>
<form id="form1">
Type radient of circle:
<input type="text" name="txtr" id="r-input" value="10">
<br>
<input type="button" value="Calculate" onclick="CalculateArea()">
<p id="area">
</p>
</form>
<script type="text/javascript ">
function CalculateArea() {
var r = document.getElementById('r-input').value;
let p = document.getElementById('area');
var area = (r * r * Math.PI);
if (r % 1 != 0 || r < 1) {
p.innerHTML = 'Please enter a whole number greater than 0';
console.log("r " + r);
console.log("area " + area);
} else {
p.innerHTML = area;
}
}
</script>
</body>
</html>
previous answer
sometimes the ide beautify the code wrong,
not because you write wrong,
but because you insert html code in javascript... so technically the ide think that you writing js... (that the result)
no problem, here the solution
copy the <form> code
<form>
...
</form>
CRTL X for copy it
put in the start with CTRL C ( outside of <script> tag)
try to delete the spaces between the name of the tag and the < or >
here the code
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> Area of circle </title>
</head>
<body>
<form id='form1'>
Type radient of circle:
<input type="text" name="txtr" size=1 0>
<br>
<input type="button" value="Calculate" onClick='CalculateArea()'>
<p id='area'>
</p>
</form>
<script type="text/javascript">
function CalculateArea() {
var r = document.getElementById('form1').value;
let p = document.getElementById('area')
var area = (r * r * Math.PI);
if (r % 1 != 0 || r < 1) {
p.innerHTML = 'Please enter a whole number greater than 0';
} else {
p.innerHTML = area;
}
}
</script>
</body>
</html>
The element belongs outside the script element, in the document .
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> Area of circle </title>
</head>
<body>
<form id='form1'>
Type radient of circle:
<input type="text" name="txtr" size=10>
<br>
<input type="button" value="Calculate" onClick='CalculateArea()'>
<p id='area'></p>
</form>
</body>
<script type="text/javascript">
function CalculateArea() {
var r = document.getElementById('form1').value;
let p = document.getElementById('area')
var area = (r * r * Math.PI);
if (r%1 !=0 || r < 1) p.innerHTML = 'Please enter a whole number greater than 0';
else p.innerHTML = area;
}
</script>
</html>
I'm just trying to input an number and then add 10% and then take that total and .08% tax. Can you please help me figure out what I'm doing wrong. I sure it is something simple I'm overlooking but I'm new to this and can't figure what is wrong.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Price tool</title>
</head>
<body>
<form name="operation_form">
<label style="font-size:20px"><b>Price Tool</b></label>
<br/>
<br/>
<br/>
<label>Item Price: </label><input type="number" name='acertscore' value="" />
<br/>
<br/>
<label><b>Total is:</b></label><input type="number" name="answerbox">
<br/>
<input type="button" value="Calculate" onclick="costCalc();" />
<br/>
<input type="button" value="Reset" onClick="this.form.reset()" />
</form>
<script type="text/javascript">
function costCalc() {
var form = document.forms["operation_form"];
var x = form["acertscore"].value;
var cost = (x * .1) + x;
var answer = (cost * .08) + cost;
form["answerbox"].value = answer;
}
</script>
</body>
</html>
I logged the value of 'cost' in your code when I start with the value 100
var cost = (x * .1) + x;
console.log(cost);
and got a value of '10100'
But if I make sure that x is a number I get the correct value (110)
var cost = (x * .1) + Number(x);
console.log(cost);
And I get 118.8 for the total.
When you retrieve the value from your input control, it comes through as a string value.
var x = form["acertscore"].value; // x is a string
If you convert this to a number immediately you'll avoid additional problems.
var x = Number(form["acertscore"].value); // x is a number
function costCalc() {
var form = document.forms["operation_form"];
var x = Number(form["acertscore"].value);
var cost = (x * .1) + x;
var answer = (cost * .08) + cost;
form["answerbox"].value = answer;
}
<form name="operation_form">
<label style="font-size:20px"><b>Price Tool</b></label>
<br/>
<br/>
<br/>
<label>Item Price: </label><input type="number" name="acertscore" value="" />
<br/>
<br/>
<label><b>Total is:</b></label><input type="number" name="answerbox">
<br/>
<input type="button" value="Calculate" onclick="costCalc();" />
<br/>
<input type="button" value="Reset" onClick="this.form.reset()" />
</form>
The problem is that your answer number is so long that it tries to display exponents. Because of this, the number gets treated as a string, though you've specified that the output goes into an <input> field with a type of number. Because your answer is not a number, it can't be displayed.
To resolve this, you can parse the output as a float before displaying it:
form["answerbox"].value = parseFloat(answer);
function costCalc() {
var form = document.forms["operation_form"];
var x = form["acertscore"].value;
var cost = (x * .1) + x;
var answer = (cost * .08) + cost;
form["answerbox"].value = parseFloat(answer);
}
<form name="operation_form">
<label style="font-size:20px"><b>Price Tool</b></label>
<br/>
<br/>
<br/>
<label>Item Price: </label><input type="number" name='acertscore' value="" />
<br/>
<br/>
<label><b>Total is:</b></label><input type="number" name="answerbox">
<br/>
<input type="button" value="Calculate" onclick="costCalc();" />
<br/>
<input type="button" value="Reset" onClick="this.form.reset()" />
</form>
Hope this helps!
While working on the html code which contains some javascript code as well, i saw that the programm works but gives the results needed fast and then erases them in one single moment (I think that the problem is not rooted in the javascript code). What I need is to pause those results on screen, not erase them. Here is the code:
<html>
<head>
<title>Geometric operations</title>
<script>
function Calculate(){
var radius=document.forms["form1"]["radius"].value;
if (radius==null || radius=="" || isNaN(radius)){
alert("Please give the radius of the circle");
return false;
}
var radius = parseInt(document.getElementById("radius").value,5);
var perimeter = (2 * radius * Math.PI);
var embadon = (radius * radius * Math.PI);
document.getElementById("perimeter").value = perimeter;
document.getElementById("embadon").value = embadon;
}
</script>
</head>
<body>
<h1>Calculation of circle perimeter and circle area</h1>
To calculate the circle perimeter and circle area you need to give the radius and then press the button<b>"Calculation"</b><br>
<form name="form1" action="" method="" onSubmit="return Calculate()">
<pre>
Circle radius : <input type="text" id="radius" size=5> m<br>
Circle perimeter : <input type="text" id='perimeter' size=5> m <br>
Circle area : <input type="text" id='embadon' size=5> m^2<br>
<input type="submit" name="submit" value="Calculation" onclick="Calculate()">
</pre></form>
</body>
</html>
Thanks in advance for any help or insight as to why this happens.
You run to send the form and execution of the function. The function is sent and the page is refreshed. Change the type of button type="submit" to type="button" and add return false;in the function.
<html>
<head>
<title>Geometric operations</title>
<script>
function Calculate(){
var radius=document.forms["form1"]["radius"].value;
if (radius==null || radius=="" || isNaN(radius)){
alert("Please give the radius of the circle");
return false;
}
var radius = parseInt(document.getElementById("radius").value,5);
var perimeter = (2 * radius * Math.PI);
var embadon = (radius * radius * Math.PI);
document.getElementById("perimeter").value = perimeter;
document.getElementById("embadon").value = embadon;
return false;
}
</script>
</head>
<body>
<h1>Calculation of circle perimeter and circle area</h1>
To calculate the circle perimeter and circle area you need to give the radius and then press the button<b>"Calculation"</b><br>
<form name="form1" action="" method="" onSubmit="return Calculate()">
<pre>
Circle radius : <input type="text" id="radius" size=5> m<br>
Circle perimeter : <input type="text" id='perimeter' size=5> m <br>
Circle area : <input type="text" id='embadon' size=5> m^2<br>
<input type="button" name="submit" value="Calculation" onclick="Calculate()">
</pre></form>
</body>
</html>
Here it is:
<html>
<head>
<title>Geometric operations</title>
<script>
function Calculate(){
var radius=document.forms["form1"]["radius"].value;
if (radius==null || radius=="" || isNaN(radius)){
alert("Please give the radius of the circle");
return false;
}
var num=2;
var PI=3.14159;
var radius=document.forms["form1"]["radius"].value;
var perimeter = ((num) * (radius) * (PI));
var embadon = ((radius) * (radius) * (PI));
document.getElementById("perimeter").value = perimeter;
document.getElementById("embadon").value = embadon;
return false;
}
</script>
</head>
<body>
<h1>Calculation of circle perimeter and circle area</h1>
To calculate the circle perimeter and circle area you need to give the
radius and then press the button<b>"Calculation"</b><br>
<form name="form1" action="" method="" onSubmit="return Calculate()">
<pre>
Circle radius : <input type="text" id="radius" size=5> m<br>
Circle perimeter : <input type="text" id='perimeter' size=5> m <br>
Circle area : <input type="text" id='embadon' size=5> m^2<br>
<input type="button" name="SUBMIT" value="Calculation"onclick="Calculate()">
</pre></form>
</body>
</html>
I was wondering instead of using the alert function to show the function result if there was a way to print it in a text field on the same page underneath the Calculate Button. Here is what I have so far:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="styles/formula_styles.css">
<script type="text/javascript">
var a,b,c;
function setValues1()
{
a = Number(document.getElementById("a").value);
b = Number(document.getElementById("b").value);
c = Number(document.getElementById("c").value);
}
function and()
{
setValues1();
result1 = (-b + Math.sqrt(b*b -4*a*c))/(2*a);
result2 = (-b - Math.sqrt(b*b -4*a*c))/(2*a);
alert("The volume of this cube is " +result1 + " and " +result2);
}
</script>
</head>
<body>
<nav>
Home // Grade Levels
</nav>
<div id="container">
<div id="formula">
<input type="text" id="a" placeholder="'A' Variable"/><br>
<input type="text" id="b" placeholder="'B' Variable"/><br>
<input type="text" id="c" placeholder="'C' Variable"/><br>
<input type="button" onclick="and()" value="Calculate!"/>
</div>
</div>
</body>
</html>
add an element to your html, something like this:
<div id="results"></div>
Then instead of using an alert, you can do something along the lines of this:
document.getElementById("results").innerHTML = "The volume of this cube is " +result1 + " and " +result2;
Create a div under the button and populate the innerHTML of the div:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="styles/formula_styles.css">
<script type="text/javascript">
var a, b, c;
function setValues1() {
a = Number(document.getElementById("a").value);
b = Number(document.getElementById("b").value);
c = Number(document.getElementById("c").value);
}
function and() {
setValues1();
result1 = (-b + Math.sqrt(b * b - 4 * a * c)) / (2 * a);
result2 = (-b - Math.sqrt(b * b - 4 * a * c)) / (2 * a);
document.getElementById('result').innerHTML = "The volume of this cube is " + result1 + " and " + result2;
}
</script>
</head>
<body>
<nav>
Home // Grade Levels
</nav>
<div id="container">
<div id="formula">
<input type="text" id="a" placeholder="'A' Variable" />
<br>
<input type="text" id="b" placeholder="'B' Variable" />
<br>
<input type="text" id="c" placeholder="'C' Variable" />
<br>
<input type="button" onclick="and()" value="Calculate!" />
<div id="result">
</div>
</div>
</div>
</body>
</html>
You can do this by setting up an element you wish to contain the text.
document.getElementById("result").innerHTML = "The volume of this cube is " +result1 + " and " + result2;
To do this you need set the element up with an ID of result.
This line of code is calling the function getElementByID to get the element, which then lets you change its innerHTML property.
The element you assign to this can be whatever you want it to be.
This question already has answers here:
Why does this concatenate instead of adding up
(3 answers)
Closed 8 years ago.
I am making a JavaScript code that solves the midpoint formula when you give it inputs but when it gives me the answer the numbers are not what they are supposed to be! I have checked everything and it should work fine, but it doesn't. Here is the code,please help me:
<!DOCTYPE html>
<html>
<head>
<style>
</style>
<script>
function myFunction() {
var xone = document.getElementById("x1").value;
var yone = document.getElementById("y1").value;
var xtwo = document.getElementById("x2").value;
var ytwo = document.getElementById("y2").value;
var step1 = (xone + xtwo) / 2;
var step2 = (yone + ytwo) / 2;
alert("(" + step1 + "," + step2 + ")");
}
</script>
</head>
<body>
<span>x1</span>
<input type="text" id="x1"></input><br>
<span>y1</span>
<input type="text" id="y1"></input><br>
<span>x2</span>
<input type="text" id="x2"></input><br>
<span>y2</span>
<input type="text" id="y2"></input><br>
<button onclick="myFunction()">Go</button>
</body>
</html>
here is the correction
<head>
<style>
</style>
<script>
function myFunction() {
var xone = document.getElementById("x1").value;
var yone = document.getElementById("y1").value;
var xtwo = document.getElementById("x2").value;
var ytwo = document.getElementById("y2").value;
var step1= (+xone + +xtwo)/2;
var step2= (+yone + +ytwo)/2;
alert("("+step1+","+step2+")");
}
</script>
</head>
<body>
<span>x1</span>
<input type="text" id="x1"></input><br>
<span>y1</span>
<input type="text" id="y1"></input><br>
<span>x2</span>
<input type="text" id="x2"></input><br>
<span>y2</span>
<input type="text" id="y2"></input><br>
<button onclick="myFunction()">Go</button>
</body>
You try to add the 2 number. For this you should do +var1 + +var2