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>
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!
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.
<html>
<head>
<title>
Form
</title>
</head>
<body>
<script type="text/javascript">
function calculate (form)
{
cel = fah * 0.5555 - 32;
document.getElementById("finish").innerHTML = cel;
}
</script>
<form name="myform" action="" method="get"> Turn Fahrenheit to Celsius! <br>
<input type="number" name="fah">
<input type="button" name="button" value="calculate" onClick="calculate(this.form)">
<button type="reset" value="Reset">Reset</button>
</form>
<p id="finish">°C</p>
</body>
</html>
Edit1: Moved the inner.HTML into the Function
So the reset button is the only thing that works. Is it possible to calculate the math this way?
You asked a question on how to create a pizza form a while ago and you deleted it soon as it was down voted a few times.
The point to note here is, it is okay if a few people dislike your question. You've joined StackExchange not to gain points but to learn a few things. Your question could be helpful to a lot of others out there in this world. So here it is the answer to your pizza question
<html>
<body>
<p>A pizza is 13 dollars with no toppings.</p>
<form action="form_action.asp">
<input type="checkbox" name="pizza" value="Pepperoni" id="pep">Pepperoni + 5$<br>
<input type="checkbox" name="pizza" value="Cheese" id="che">Cheese + 4$<br>
<br>
<input type="button" onclick="myFunction()" value="Send order">
<input type="button" onclick="cost()" value="Get cost">
<br><br>
<input type="text" id="order" size="50">
</form>
<script>
function myFunction() {
var pizza = document.forms[0];
var txt = "";
var i;
for (i = 0; i < pizza.length; i++) {
if (pizza[i].checked) {
txt = txt + pizza[i].value + " ";
}
}
document.getElementById("order").value = "You ordered a pizza with: " + txt;
}
function cost() {
var pep = 5;
var che = 4;
var pizza = 13;
var total = 0;
if (document.getElementById("pep").checked === true) {
total += pep;
}
if (document.getElementById("che").checked === true) {
total += che;
}
document.getElementById("order").value = "The cost is : " + total;
}
</script>
</body>
</html>
Thanks. I hope this helps you.
Adeno Fixed it by declaring what fah was. you can also see your errors with f12.
https://stackoverflow.com/users/965051/adeneo
<html>
<head>
<title>
Form
</title>
</head>
<body>
<script type="text/javascript">
function calculate(form) {
var cel = (document.getElementById("fah").value -32) * 5 / 9;
document.getElementById("finish").innerHTML = cel;
}
</script>
<form name="myform" action="" method="get"> Turn Fahrenheit to Celsius!
<br>
<input type="number" name="fah" id="fah">
<input type="button" name="button" value="calculate" onClick="calculate(this.form)">
<button type="reset" value="Reset">Reset</button>
</form>
<p id="finish">°C</p>
</body>
You never get the value from the input type = "number"
Try this
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script>
function calculate()
{
var fah = document.getElementById('fah').value;
var cel = parseFloat(fah * 0.5555 - 32);
document.getElementById("finish").innerHTML = cel;
}
</script>
</head>
<body>
<form>
Turn Fahrenheit to Celsius! <br>
<input type="text" name="fah" id="fah">
<input type="button" name="button" value="calculate" onClick="calculate()">
<button type="reset" value="Reset">Reset</button>
</form>
<p id="finish">°C</p>
</body>
</html>
Couple things: You need to set the innerhtml from within the function because the variable is in the function. Or you could have declared the variable outside the function first like var fah = "" then the function. But since you declared it in the function only the function can see it. So i moved the innerhtml set into the function.
Also, javascript likes to use id's not name = "fah" You can call an element by name but id is easier.
i rounded it to integer. you would get 9 decimals your way.
Lastly, innerhtml set clears all the html so you would lose the °C the way you had it.
<html>
<head>
<title>
Form
</title>
</head>
<body>
<script type="text/javascript">
function calculate (form)
{
var fah = this.fah.value;
cel = Math.round((fah-32) / 1.8);
document.getElementById("finish").innerHTML = cel+"°C";
}
</script>
<form name="myform" action="" method="get"> Turn Fahrenheit to Celsius! <br>
<input type="number" name="fah" id = "fah">
<input type="button" name="button" value="calculate" onClick="calculate(this.form)">
<button type="reset" value="Reset">Reset</button>
</form>
<p id="finish"></p>
</body>
</html>
I am trying to get the values from my form into a function and return a value
Here is my function
function createInput(){
var weight;
weight = document.bmiCalc.weight.value;
var height = getElementById('height').value;
input.onclick = function calcBMI()
{
// calculate users BMI
var BMI = weight * 703 / Math.pow(height, 2);
return BMI;
}
document.getElementById("BMI").appendChild();
}
and here is my form code from my html page
<form id="bmiCalc">
<h2> Calculate your Current BMI</h2>
<p><label> Please enter your weight in lbs: <input type="text" name = "weight" id= "weight"></label></p>
<p><label> Please enter your height in inches: <input type="text" name ="height" id="height"></label>
<button type="submit">Submit</button></p>
<p><label> Your current BMI is: <input name="BMI" id="BMI"></label></p>
</form>
Changed your html and js:
http://jsfiddle.net/CQxnx/
html:
<h2> Calculate your Current BMI</h2>
<label> Please enter your weight in lbs:</label> <input type="text" name="weight" id="weight">
<br />
<label> Please enter your height in inches:</label> <input type="text" name="height" id="height">
<br />
<input type="button" value="calculate" onclick="calcBMI();" />
<br />
<div id="msg"></div>
js:
function calcBMI(){
var weight = document.getElementById('weight').value;
var height = document.getElementById('height').value;
// calculate users BMI
var BMI = weight * 703 / Math.pow(height, 2);
var msg = document.getElementById('msg');
msg.innerHTML = 'Your current BMI is:' + BMI;
}
You seem to be a bit off, but you never actually call the createInput function. Even after that, you don't actually append the input button. There is no BMI ID element, and createInput would calculate the weight/height as they are when it's called, not when the button is clicked.
Instead, you should just put the button in the DOM to begin with and bind the calculation function to it.
document.getElementById('calculate').addEventListener('click', function () {
document.getElementById("BMI").textContent =
document.getElementById('weight').value * 703 /
Math.pow(document.getElementById('height').value, 2);
});
http://jsfiddle.net/fsKNb/