Hello. I\'m having touble with the last part to my assignment using html/css/jav
ID: 3572528 • Letter: H
Question
Hello. I'm having touble with the last part to my assignment using html/css/javascript. "Produce the computed area, a, to the area text field with a precision of p". If someone can help figure this out for me, I'd appreciate it.
index.html
----------------
<!DOCTYPE html>
<html lang="en">
<head>
<title>Assignment 12</title>
<!--
Filename: index.html
-->
<meta charset="utf-8">
<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
Remove this if you use the .htaccess -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width; initial-scale=1.0">
<link rel="stylesheet" href="main.css">
</head>
<body>
<form id="acalc" name="acalc" method="post" enctype="text/plain">
<fieldset>
<legend>Area Calculator</legend>
<label for="radius"> Radius <input id="radius" name="radiusField" type="text" value=""/> </label>
<label for="area"> Area <input id="area" name="areaField" type="text" value=""/> </label>
<input type="button" id="calculatearea" name="calculatearea" value="Calculate Area">
<label for="precision"> Precision
<select id="precision" name="precision">
<option value="2">2</option>
<option value="4">4</option>
<option value="6">6</option>
<option value="8">8</option>
</select>
</label>
</fieldset>
</form>
<script src="main.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</body>
</html>
-------------------
main.css
------------------
/*fieldset style */
fieldset{
border 2px solid black;
padding:2%;
margin-bottom:0.8em;
width:50%
}
legend{
font-size:1.4em;
font-weight:bold;
font-family: Georgia "Times New Roman" Times serif;
}
/*lable style */
label{
font-size:1.2em;
display:block;
position:relative;
margin: 1em 0;
}
#radius, #area{
width:20em;
position:absolute;
left:10em;
}
-----------------------
main.js
---------------------
function computearea(r){
return Math.PI*r*r;
}
$(document).ready(function() {
$("#calculatearea").click(function(){
var p = $('#precision').val();
var r = $('#radius').val();
$('#area').val(Math.PI*r*r);
});
});
----------------
Explanation / Answer
index.html
----------------
<!DOCTYPE html>
<html lang="en">
<head>
<title>Assignment 12</title>
<!--
Filename: index.html
-->
<meta charset="utf-8">
<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
Remove this if you use the .htaccess -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width; initial-scale=1.0">
<!--the following is changed from the bottom.. The external library should be loaded before the user defined functions -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="main.css">
</head>
<body>
<form id="acalc" name="acalc" method="post" enctype="text/plain">
<fieldset>
<legend>Area Calculator</legend>
<label for="radius"> Radius <input id="radius" name="radiusField" type="text" value=""/> </label>
<label for="area"> Area <input id="area" name="areaField" type="text" value=""/> </label>
<input type="button" id="calculatearea" name="calculatearea" value="Calculate Area">
<label for="precision"> Precision
<select id="precision" name="precision">
<option value="2">2</option>
<option value="4">4</option>
<option value="6">6</option>
<option value="8">8</option>
</select>
</label>
</fieldset>
</form>
<script src="main.js"></script>
<!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> -->
</body>
</html>
-------------------
main.css
------------------
/*fieldset style */
fieldset{
border 2px solid black;
padding:2%;
margin-bottom:0.8em;
width:50%
}
legend{
font-size:1.4em;
font-weight:bold;
font-family: Georgia "Times New Roman" Times serif;
}
/*lable style */
label{
font-size:1.2em;
display:block;
position:relative;
margin: 1em 0;
}
#radius, #area{
width:20em;
position:absolute;
left:10em;
}
-----------------------
main.js
---------------------
function computearea(r){
return Math.PI*r*r;
}
$(document).ready(function() {
$("#calculatearea").click(function(){
var p = $('#precision').val();
var r = $('#radius').val();
var ar = computearea(r);
$('#area').val(ar.toPrecision(p));
});
});
----------------
Related Questions
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.