<html> <head> <title>HTML form Tag</title> </head> <body> <script type=\"text/ja
ID: 3701778 • Letter: #
Question
<html>
<head>
<title>HTML form Tag</title>
</head>
<body>
<script type="text/javascript">
function calculate()
{
'use strict';
// For storing the volume:
var volume;
var seleced;
// Get a reference to the form value:
var radius = document.getElementById('radius').value;
var height = document.getElementById('height').value;
var unit = document.getElementById('unit');
var shape = document.getElementById('shape');
for (Count = 0; Count < 2; Count++)
{
if (theForm.unit[Count].checked)
selected = theForm.unit[Count];
break;
}
document.getElementById('unit').innerHTML = selected.text;
document.getElementById('shape').innerHTML = shape.options[shape.selectedIndex].text;
// Make sure radius & height is positive:
radius = Math.abs(radius);
height = Math.abs(height);
// Perform the calculation:
if(shape[shape.selectedIndex].value=="Sphere"){
volume = (4/3) * Math.PI * Math.pow(radius, 3);
}
else if(shape[shape.selectedIndex].value=="Cylinder"){
volume = Math.PI * Math.pow(radius, 2) * height;
}
else if(shape[shape.selectedIndex].value=="Cone"){
volume = Math.PI * Math.pow(radius, 2) * (height/3);
}
// Format the volume:
volume = volume.toFixed(4);
return false;
}
</script>
<form action="" method="get" id="theForm">
<h1>
This web site will find the volume for a Cylinder, Sphere or Cone
<h1/>
<h4>
Select the units (English or SI)
<input type="radio" name="unit" value="English" checked> English
<input type="radio" name="unit" value="SI" > SI <br><br>
Select the shape
<select name="shape">
<option value="cone">Cone</option>
<option value="cylinder">Cylinder</option>
<option value="sphere">Sphere</option>
</select> <br><br>
Enter the radius :
<input type="text" name="radius" id="radius" required><br><br>
For a cylinder and cone, Enter the height :
<input type="text" name="height" maxlength="10" /> <br><br>
<input type="reset" value="Reset the Form">
</h4>
<h1>
Results
</h1>
<h4>
<label id="unit">You selected to use English units</label> <br><br>
<label id="shape">You selected to find the value of a Cone shape</label>
</h4>
<form action="" method="post" id="MyForm">
<table border=1>
<tr>
<th>Shape</th>
<th>Radius</th>
<th>Height</th>
<th>Volume</th>
</tr>
<tr>
<td></td>
<td>(ft)</td>
<td>(ft)</td>
<td>(ft^3)</td>
</tr>
<tr>
<td>Cone</td>
<td></td>
<td></td>
<td><input type="text" name="volume" id="volume"></td>
</tr>
</table>
<input type="submit" value="Click to calculate the Results" id="submit">
</form>
</form>
</body>
</html>
Your task: This assignment is to get you familiar with forms and form validation. Design, a very basic HTML web page with both form tags and a JavaScript code that will allow the user to calculate the Volume for a cylinder, sphere or cone and output the results in either English or SI units. The web page must:
(1) Allow the user to select either English or SI units with the use of a radio button selection.
(2) Allow the user to select the shape with a pull down menu
(3) Allow the user to enter the radius and height values in separate text box
(4) Once the data is collected have a button tag that will activate a JavaScript that will read the form data and return the input data. The Units and shape selection should be displayed as shown below.
(5) The Shape, radius and height data must be displayed in a table.
(6) The script should calculate the Volume based on the input data and display these results in the table.
Here is a sample page as a guide
Above the code has a problem with table (<td></td>)
I don't know how to display the radius value and volume in the table. please tell me about it
Your task: This assignment is to get you familiar with forms and form validation, Design, a very besic HTML web page with both form tags and a JavaScript code that will allow the uscr to calculate the Volume for a cylinder, sphere conc and output the results in cither English or SI units. The wcb page should (1) Allow the user to select cither English or SI units with the use of a radio button selection. (2) Allow the user to select the shape with a pull down menu (3) Allow the user to enter the radius and height values in separate text box (4) Once the data is collected have a button tag that will activate a javascript that will read the form data and return the input data. The Units and shape selection should be displayed as shown below. (5) The Shape, radius and height data must be displayed in a table. (6) The script should calculate the Volume based on the input data and display these results in the table. Here is a sample printout as a guide. This web site will find the volume for a Cylinder, Sphere or Cone Select the units English or ST Select the shape Cone Einter the eadas 2 For the cyindet and cone Enner the heighe 2 Results You selected to sse Eriatish tnrts Shape Radves Heght Volume th 3)Explanation / Answer
Solution >>>
I have added ID for <td>. Also made some changes in javscript code as there are lots of bugs. Now all bugs are removed and working code is as follows :
<html>
<head>
<title>HTML form Tag</title>
</head>
<body>
<script type="text/javascript">
function calculate()
{
'use strict';
// For storing the volume:
var volume;
var seleced;
// Get a reference to the form value:
var radius = document.getElementById('radius').value;
var height = document.getElementById('height').value;
var unit = document.getElementById('unit');
var shape = document.getElementById('shape');
var selected;
for ( var Count = 0; Count < 2; Count++)
{
if (theForm.unit[Count].checked)
selected = theForm.unit[Count];
break;
}
document.getElementById('unit').innerHTML = selected.value;
document.getElementById('shape').innerHTML = shapeDropdown.options[shapeDropdown.selectedIndex].text;
// Make sure radius & height is positive:
radius = Math.abs(radius);
height = Math.abs(height);
// Perform the calculation:
if(shapeDropdown.options[shapeDropdown.selectedIndex].text=="Sphere"){
volume = (4/3) * Math.PI * Math.pow(radius, 3);
}
else if(shapeDropdown.options[shapeDropdown.selectedIndex].text=="Cylinder"){
volume = Math.PI * Math.pow(radius, 2) * height;
}
else if(shapeDropdown.options[shapeDropdown.selectedIndex].text=="Cone"){
volume = Math.PI * Math.pow(radius, 2) * (height/3);
}
// Format the volume:
volume = volume.toFixed(4);
document.getElementById("RADIUS").innerText = radius;
document.getElementById("HEIGHT").innerText = height;
document.getElementById("VOLUME").value = volume;
}
</script>
<form id="theForm" >
<h1>
This web site will find the volume for a Cylinder, Sphere or Cone
<h1/>
<h4>
Select the units (English or SI)
<input type="radio" name="unit" value="English" checked> English
<input type="radio" name="unit" value="SI" > SI <br><br>
Select the shape
<select name="shape" id="shapeDropdown">
<option value="cone">Cone</option>
<option value="cylinder">Cylinder</option>
<option value="sphere">Sphere</option>
</select> <br><br>
Enter the radius :
<input type="text" name="radius" id="radius" required><br><br>
For a cylinder and cone, Enter the height :
<input type="text" name="height" id="height" maxlength="10" /> <br><br>
<input type="reset" value="Reset the Form">
</h4>
<h1>
Results
</h1>
<h4>
<label id="unit">You selected to use English units</label> <br><br>
<label id="shape">You selected to find the value of a Cone shape</label>
</h4>
<form action="" method="post" id="MyForm">
<table border=1>
<tr>
<th>Shape</th>
<th>Radius</th>
<th>Height</th>
<th>Volume</th>
</tr>
<tr>
<td></td>
<td>(ft)</td>
<td>(ft)</td>
<td>(ft^3)</td>
</tr>
<tr>
<td>Cone</td>
<td id="RADIUS"></td>
<td id="HEIGHT"></td>
<td><input type="text" name="volume" id="VOLUME"></td>
</tr>
</table>
<input type="button" value="Click to calculate the Results" id="submit">
</form>
</form>
</body>
</html>
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.