...

View Full Version : Very new to JS, Need help with an averages calculator



Ederson
10-13-2011, 03:44 PM
I have my first ever scholastic JS assignment and so far it's felt nearly impossible to get a grip on how to do it. I've gone through the W3c tutorials entirely 3 times now and still, nothing is clicking mentally. Generally I do better if I can reverse engineer already written code but I can't find anything similar enough to this on the net to figure it out.

The assignment is to create a grade averages calculator as seen in this picture:
http://i.imgur.com/JrUkj.jpg


Along with this starter code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Assignments score calculator</title>
<style type="text/css">
<!--
.score {
width: 30px;
}
-->
</style>
</head>

<body>
<h1>Assignments score calculator</h1>

<form id="calculator" name="calculator" method="post" action="">
<p>Enter your Name:
<label for="firstname"></label>
<br />
<input type="text" name="firstname" id="firstname" />
<p>
<label for="A1">Assignment #1 score:</label>
<input name="A1" type="text" class="score" id="A1" maxlength="3" /><br />
<label for="A2">Assignment #2 score:</label>
<input name="A2" type="text" class="score" id="A2" maxlength="3" /><br />
<label for="A3">Assignment #3 score:</label>
<input name="A3" type="text" class="score" id="A3" maxlength="3" />
<p>
<label for="button"></label>
<input type="submit" name="Submit" id="Submit" value="Submit" xx="doCalculation(this.form.firstname.value,this.form.A1.value,this.form.A2.value,this.form.A3.value)" />
</form>
</body>
</html>

I understand what I need to do, just not the syntax to do it. Any help would be appreciated. Sorry for newbiness.

jmrker
10-13-2011, 04:41 PM
This is not the completion of your assignment, but it should get to started toward the finish.
Note the added comments toward that end.
It at least produces an output, which your's did not.



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Assignments score calculator</title>
<style type="text/css">
.score { width: 30px; }
</style>
<script type="text/javascript">
function doCalculation(fname,g1,g2,g3) {
var str = '<h1>Hello '+fname+'</h1>'
str += '<p>You reported the following scores: '+g1+' '+g2+' '+g3+'<p>';
// add more to string for your average calculations
// add more to string to convert to letter grade
document.getElementById('results').innerHTML = str;
// you can add additional CSS to change placement of the results
}
</script>

</head>

<body>
<h1>Assignments score calculator</h1>

<form id="calculator" name="calculator" method="post" action="" onsubmit="return false">
<p>Enter your Name:
<label for="firstname"></label>
<br />
<input type="text" name="firstname" id="firstname" />
<p>
<label for="A1">Assignment #1 score:</label>
<input name="A1" type="text" class="score" id="A1" maxlength="3" /><br />
<label for="A2">Assignment #2 score:</label>
<input name="A2" type="text" class="score" id="A2" maxlength="3" /><br />
<label for="A3">Assignment #3 score:</label>
<input name="A3" type="text" class="score" id="A3" maxlength="3" />
<p>
<label for="button"></label>
<input type="submit" name="Submit" id="Submit" value="Submit" onclick=doCalculation(this.form.firstname.value,this.form.A1.value,this.form.A2.value,this.form.A3.v alue)
/>
<div id="results"></div>
</form>
</body>
</html>

Good Luck!
:)

Ederson
10-13-2011, 04:50 PM
Thanks for the reply! I'll work with this and see if I can finish it.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum