admin管理员组文章数量:1389871
Can anyone help me figure out what I'm doing wrong with my gpa calculator? I'm working on a a webpage that will allow users to enter letter grades for three specific classes. I've created the html and javascript code that converts letter grades to point values. I've also created a function that adds the point grades together then divides by four to output a gpa for the three classes. I've worked on this for several weeks and cannot figure out what I'm doing wrong. I'm sure there are many different ways to do what I'm trying to do. However, I'm looking for a way to make me code because the way I've written the code makes the most sense to me. Thanks
<!DOCTYPE html> <html>
<head> <meta charset="utf-8"> <link rel="stylesheet" type="text/css"
href="styles.css"> <title>Center for Health Information Technology
</title>
<script type="text/javascript">
function calculate()
{
var x=document.getElementById("result1").value;
var y=document.getElementById("result2").value;
var z=document.getElementById("result3").value;
var a=document.getElementById("result4").value;
var result1=parseFloat(x) + parseFloat(y) + parseFloat(z)
+ parseFloat(a); // conversion to numbers; this is necessary for +, other operators will automatically convert
var result5=x%y;
//build a string first and then display it all together.
//don't forget HTML tags in your output!
var html="<p>Your GPA is: "+result1/4+"</p>";
document.getElementById("total").innerHTML=html;
}
</script>
</head>
<body>
<h1> <a href=" "> <img src="images/ksu.jpg" alt="KSU
Graphic"/> </a>CCSE Graduate Certificate in Health Information
Technology<a href=" "> <img src="images/ksu.jpg"
alt="KSU Graphic"/> </a>
</h1>
<nav> <a href="index.html">Home</a> | <a
href="faculty.html"> Faculty</a> | <a href="third.html">
Miscellaneous</a>
</nav>
<p>The summer is ing and Cert HIT has some student assistant positions open.
In order to be considered for such a position, a student has to plete the following
4 classes and have an average grade of 3.5 or above:
IT 3503 Foundation of HIT, IT 4153 Advanced Database, IT 5443 Web Development, & IT 5413
Software Design and Development. Please enter the grades you have received in the four
classes.
</p>
<script language="JavaScript">
function calculateGpa (form) {
var gpa = form.gpa1.value;
if (gpa == "A") {
gpa = 4;
}
if (gpa == "B") {
gpa = 3;
}
if (gpa == "C") {
gpa = 2;
}
if (gpa == "D") {
gpa = 1;
}
if (gpa == "F") {
gpa = 0;
}
if (gpa == "a") {
gpa = 4;
}
if (gpa == "b") {
gpa = 3;
}
if (gpa == "c") {
gpa = 2;
}
if (gpa == "d") {
gpa = 1;
}
if (gpa == "f") {
gpa = 0;
}
document.getElementById("result1").innerHTML = gpa;
}
</script>
<body>
<form action="" id="it3503">Enter your grade in the form of a letter grade for class IT 3503:<br>
<input type="text" name="gpa1" value="">
<input type="button" name="button" value="Calculate" onClick="calculateGpa(this.form)">
</form>
<div id="result1"></div>
<script language="JavaScript">
function calculateGpa2 (form) {
var gpa = form.gpa2.value;
if (gpa == "A") {
gpa = 4;
}
if (gpa == "B") {
gpa = 3;
}
if (gpa == "C") {
gpa = 2;
}
if (gpa == "D") {
gpa = 1;
}
if (gpa == "F") {
gpa = 0;
}
if (gpa == "a") {
gpa = 4;
}
if (gpa == "b") {
gpa = 3;
}
if (gpa == "c") {
gpa = 2;
}
if (gpa == "d") {
gpa = 1;
}
if (gpa == "f") {
gpa = 0;
}
document.getElementById("result2").innerHTML = gpa;
}
</script>
<body>
<form action="" id="it4153">Enter your grade in the form of a letter grade for class IT 4153:<br>
<input type="text" name="gpa2" value="">
<input type="button" name="button" value="Calculate" onClick="calculateGpa2(this.form)">
</form>
<div id="result2"></div>
<script language="JavaScript">
function calculateGpa3 (form) {
var gpa = form.gpa3.value;
if (gpa == "A") {
gpa = 4;
}
if (gpa == "B") {
gpa = 3;
}
if (gpa == "C") {
gpa = 2;
}
if (gpa == "D") {
gpa = 1;
}
if (gpa == "F") {
gpa = 0;
}
if (gpa == "a") {
gpa = 4;
}
if (gpa == "b") {
gpa = 3;
}
if (gpa == "c") {
gpa = 2;
}
if (gpa == "d") {
gpa = 1;
}
if (gpa == "f") {
gpa = 0;
}
document.getElementById("result3").innerHTML = gpa;
}
</script>
<body>
<form action="" id="it5443">Enter your grade in the form of a letter grade for class IT 5443:<br>
<input type="text" name="gpa3" value="">
<input type="button" name="button" value="Calculate" onClick="calculateGpa3(this.form)">
</form>
<div id="result3"></div>
<script language="JavaScript">
function calculateGpa4(form) {
var gpa = form.gpa4.value;
if (gpa == "A") {
gpa = 4;
}
if (gpa == "B") {
gpa = 3;
}
if (gpa == "C") {
gpa = 2;
}
if (gpa == "D") {
gpa = 1;
}
if (gpa == "F") {
gpa = 0;
}
if (gpa == "a") {
gpa = 4;
}
if (gpa == "b") {
gpa = 3;
}
if (gpa == "c") {
gpa = 2;
}
if (gpa == "d") {
gpa = 1;
}
if (gpa == "f") {
gpa = 0;
}
document.getElementById("result4").innerHTML = gpa;
}
</script>
<body>
<form action="" id="it5413">Enter your grade in the form of a letter grade for class IT 5413:<br>
<input type="text" name="gpa4" value="">
<input type="button" name="button" value="Calculate" onClick="calculateGpa4(this.form)">
</form>
<div id="result4"></div>
<br>
<input type="button" id="final" name="button" value="Calculate" onClick="calculate()">
<script type="text/javascript">
function calculate()
{
var x=document.getElementById("result1").value;
var y=document.getElementById("result2").value;
var z=document.getElementById("result3").value;
var a=document.getElementById("result4").value;
var result1=parseFloat(x) + parseFloat(y) + parseFloat(z)
+ parseFloat(a); // conversion to numbers; this is necessary for +, other operators will automatically convert
var result5=x%y;
//build a string first and then display it all together.
//don't forget HTML tags in your output!
var html="<p>Your GPA is: "+result1/4+"</p>";
document.getElementById("total").innerHTML=html;
}
</script>
<div id="total"></div>
<br><br><br><br><br> <br><br><br><br><br><br>
<div id="result"></div>
</body>
</html>Can anyone help me figure out what I'm doing wrong with my gpa calculator? I'm working on a a webpage that will allow users to enter letter grades for three specific classes. I've created the html and javascript code that converts letter grades to point values. I've also created a function that adds the point grades together then divides by four to output a gpa for the three classes. I've worked on this for several weeks and cannot figure out what I'm doing wrong. I'm sure there are many different ways to do what I'm trying to do. However, I'm looking for a way to make me code because the way I've written the code makes the most sense to me. Thanks
<!DOCTYPE html> <html>
<head> <meta charset="utf-8"> <link rel="stylesheet" type="text/css"
href="styles.css"> <title>Center for Health Information Technology
</title>
<script type="text/javascript">
function calculate()
{
var x=document.getElementById("result1").value;
var y=document.getElementById("result2").value;
var z=document.getElementById("result3").value;
var a=document.getElementById("result4").value;
var result1=parseFloat(x) + parseFloat(y) + parseFloat(z)
+ parseFloat(a); // conversion to numbers; this is necessary for +, other operators will automatically convert
var result5=x%y;
//build a string first and then display it all together.
//don't forget HTML tags in your output!
var html="<p>Your GPA is: "+result1/4+"</p>";
document.getElementById("total").innerHTML=html;
}
</script>
</head>
<body>
<h1> <a href="http://kennesaw.edu "> <img src="images/ksu.jpg" alt="KSU
Graphic"/> </a>CCSE Graduate Certificate in Health Information
Technology<a href="http://kennesaw.edu "> <img src="images/ksu.jpg"
alt="KSU Graphic"/> </a>
</h1>
<nav> <a href="index.html">Home</a> | <a
href="faculty.html"> Faculty</a> | <a href="third.html">
Miscellaneous</a>
</nav>
<p>The summer is ing and Cert HIT has some student assistant positions open.
In order to be considered for such a position, a student has to plete the following
4 classes and have an average grade of 3.5 or above:
IT 3503 Foundation of HIT, IT 4153 Advanced Database, IT 5443 Web Development, & IT 5413
Software Design and Development. Please enter the grades you have received in the four
classes.
</p>
<script language="JavaScript">
function calculateGpa (form) {
var gpa = form.gpa1.value;
if (gpa == "A") {
gpa = 4;
}
if (gpa == "B") {
gpa = 3;
}
if (gpa == "C") {
gpa = 2;
}
if (gpa == "D") {
gpa = 1;
}
if (gpa == "F") {
gpa = 0;
}
if (gpa == "a") {
gpa = 4;
}
if (gpa == "b") {
gpa = 3;
}
if (gpa == "c") {
gpa = 2;
}
if (gpa == "d") {
gpa = 1;
}
if (gpa == "f") {
gpa = 0;
}
document.getElementById("result1").innerHTML = gpa;
}
</script>
<body>
<form action="" id="it3503">Enter your grade in the form of a letter grade for class IT 3503:<br>
<input type="text" name="gpa1" value="">
<input type="button" name="button" value="Calculate" onClick="calculateGpa(this.form)">
</form>
<div id="result1"></div>
<script language="JavaScript">
function calculateGpa2 (form) {
var gpa = form.gpa2.value;
if (gpa == "A") {
gpa = 4;
}
if (gpa == "B") {
gpa = 3;
}
if (gpa == "C") {
gpa = 2;
}
if (gpa == "D") {
gpa = 1;
}
if (gpa == "F") {
gpa = 0;
}
if (gpa == "a") {
gpa = 4;
}
if (gpa == "b") {
gpa = 3;
}
if (gpa == "c") {
gpa = 2;
}
if (gpa == "d") {
gpa = 1;
}
if (gpa == "f") {
gpa = 0;
}
document.getElementById("result2").innerHTML = gpa;
}
</script>
<body>
<form action="" id="it4153">Enter your grade in the form of a letter grade for class IT 4153:<br>
<input type="text" name="gpa2" value="">
<input type="button" name="button" value="Calculate" onClick="calculateGpa2(this.form)">
</form>
<div id="result2"></div>
<script language="JavaScript">
function calculateGpa3 (form) {
var gpa = form.gpa3.value;
if (gpa == "A") {
gpa = 4;
}
if (gpa == "B") {
gpa = 3;
}
if (gpa == "C") {
gpa = 2;
}
if (gpa == "D") {
gpa = 1;
}
if (gpa == "F") {
gpa = 0;
}
if (gpa == "a") {
gpa = 4;
}
if (gpa == "b") {
gpa = 3;
}
if (gpa == "c") {
gpa = 2;
}
if (gpa == "d") {
gpa = 1;
}
if (gpa == "f") {
gpa = 0;
}
document.getElementById("result3").innerHTML = gpa;
}
</script>
<body>
<form action="" id="it5443">Enter your grade in the form of a letter grade for class IT 5443:<br>
<input type="text" name="gpa3" value="">
<input type="button" name="button" value="Calculate" onClick="calculateGpa3(this.form)">
</form>
<div id="result3"></div>
<script language="JavaScript">
function calculateGpa4(form) {
var gpa = form.gpa4.value;
if (gpa == "A") {
gpa = 4;
}
if (gpa == "B") {
gpa = 3;
}
if (gpa == "C") {
gpa = 2;
}
if (gpa == "D") {
gpa = 1;
}
if (gpa == "F") {
gpa = 0;
}
if (gpa == "a") {
gpa = 4;
}
if (gpa == "b") {
gpa = 3;
}
if (gpa == "c") {
gpa = 2;
}
if (gpa == "d") {
gpa = 1;
}
if (gpa == "f") {
gpa = 0;
}
document.getElementById("result4").innerHTML = gpa;
}
</script>
<body>
<form action="" id="it5413">Enter your grade in the form of a letter grade for class IT 5413:<br>
<input type="text" name="gpa4" value="">
<input type="button" name="button" value="Calculate" onClick="calculateGpa4(this.form)">
</form>
<div id="result4"></div>
<br>
<input type="button" id="final" name="button" value="Calculate" onClick="calculate()">
<script type="text/javascript">
function calculate()
{
var x=document.getElementById("result1").value;
var y=document.getElementById("result2").value;
var z=document.getElementById("result3").value;
var a=document.getElementById("result4").value;
var result1=parseFloat(x) + parseFloat(y) + parseFloat(z)
+ parseFloat(a); // conversion to numbers; this is necessary for +, other operators will automatically convert
var result5=x%y;
//build a string first and then display it all together.
//don't forget HTML tags in your output!
var html="<p>Your GPA is: "+result1/4+"</p>";
document.getElementById("total").innerHTML=html;
}
</script>
<div id="total"></div>
<br><br><br><br><br> <br><br><br><br><br><br>
<div id="result"></div>
</body>
</html>-
You're putting the numeric grade into
.innerHTML, but thencalculate()tries to read it with.value. It needs to use.innerHTMLto read it. – Barmar Commented Mar 29, 2016 at 1:58
1 Answer
Reset to default 2Well, your main problem is that you are trying to get the numberic data out of result1-result4 by using the value function. However, a div element has no value function, you need to use innerText.
There are some other problems: you have defined calculate() twice, and there's no way to know which one will execute - I deleted the one at the end.
You've also got 4 open tags, you should only have one open & close body tag.
<!DOCTYPE html> <html>
<head> <meta charset="utf-8"> <link rel="stylesheet" type="text/css"
href="styles.css"> <title>Center for Health Information Technology
</title>
<script type="text/javascript">
function calculate()
{
var x=document.getElementById("result1").innerText;
var y=document.getElementById("result2").innerText;
var z=document.getElementById("result3").innerText;
var a=document.getElementById("result4").innerText;
var result1=parseFloat(x) + parseFloat(y) + parseFloat(z)
+ parseFloat(a); // conversion to numbers; this is necessary for +, other operators will automatically convert
var result5=x%y;
//build a string first and then display it all together.
//don't forget HTML tags in your output!
var html="<p>Your GPA is: "+result1/4+"</p>";
document.getElementById("total").innerHTML=html;
}
</script>
</head>
<body>
<h1> <a href="http://kennesaw.edu "> <img src="images/ksu.jpg" alt="KSU
Graphic"/> </a>CCSE Graduate Certificate in Health Information
Technology<a href="http://kennesaw.edu "> <img src="images/ksu.jpg"
alt="KSU Graphic"/> </a>
</h1>
<nav> <a href="index.html">Home</a> | <a
href="faculty.html"> Faculty</a> | <a href="third.html">
Miscellaneous</a>
</nav>
<p>The summer is ing and Cert HIT has some student assistant positions open.
In order to be considered for such a position, a student has to plete the following
4 classes and have an average grade of 3.5 or above:
IT 3503 Foundation of HIT, IT 4153 Advanced Database, IT 5443 Web Development, & IT 5413
Software Design and Development. Please enter the grades you have received in the four
classes.
</p>
<script language="JavaScript">
function calculateGpa (form) {
var gpa = form.gpa1.value;
if (gpa == "A") {
gpa = 4;
}
if (gpa == "B") {
gpa = 3;
}
if (gpa == "C") {
gpa = 2;
}
if (gpa == "D") {
gpa = 1;
}
if (gpa == "F") {
gpa = 0;
}
if (gpa == "a") {
gpa = 4;
}
if (gpa == "b") {
gpa = 3;
}
if (gpa == "c") {
gpa = 2;
}
if (gpa == "d") {
gpa = 1;
}
if (gpa == "f") {
gpa = 0;
}
document.getElementById("result1").innerHTML = gpa;
}
</script>
<body>
<form action="" id="it3503">Enter your grade in the form of a letter grade for class IT 3503:<br>
<input type="text" name="gpa1" value="">
<input type="button" name="button" value="Calculate" onClick="calculateGpa(this.form)">
</form>
<div id="result1"></div>
<script language="JavaScript">
function calculateGpa2 (form) {
var gpa = form.gpa2.value;
if (gpa == "A") {
gpa = 4;
}
if (gpa == "B") {
gpa = 3;
}
if (gpa == "C") {
gpa = 2;
}
if (gpa == "D") {
gpa = 1;
}
if (gpa == "F") {
gpa = 0;
}
if (gpa == "a") {
gpa = 4;
}
if (gpa == "b") {
gpa = 3;
}
if (gpa == "c") {
gpa = 2;
}
if (gpa == "d") {
gpa = 1;
}
if (gpa == "f") {
gpa = 0;
}
document.getElementById("result2").innerHTML = gpa;
}
</script>
<body>
<form action="" id="it4153">Enter your grade in the form of a letter grade for class IT 4153:<br>
<input type="text" name="gpa2" value="">
<input type="button" name="button" value="Calculate" onClick="calculateGpa2(this.form)">
</form>
<div id="result2"></div>
<script language="JavaScript">
function calculateGpa3 (form) {
var gpa = form.gpa3.value;
if (gpa == "A") {
gpa = 4;
}
if (gpa == "B") {
gpa = 3;
}
if (gpa == "C") {
gpa = 2;
}
if (gpa == "D") {
gpa = 1;
}
if (gpa == "F") {
gpa = 0;
}
if (gpa == "a") {
gpa = 4;
}
if (gpa == "b") {
gpa = 3;
}
if (gpa == "c") {
gpa = 2;
}
if (gpa == "d") {
gpa = 1;
}
if (gpa == "f") {
gpa = 0;
}
document.getElementById("result3").innerHTML = gpa;
}
</script>
<body>
<form action="" id="it5443">Enter your grade in the form of a letter grade for class IT 5443:<br>
<input type="text" name="gpa3" value="">
<input type="button" name="button" value="Calculate" onClick="calculateGpa3(this.form)">
</form>
<div id="result3"></div>
<script language="JavaScript">
function calculateGpa4(form) {
var gpa = form.gpa4.value;
if (gpa == "A") {
gpa = 4;
}
if (gpa == "B") {
gpa = 3;
}
if (gpa == "C") {
gpa = 2;
}
if (gpa == "D") {
gpa = 1;
}
if (gpa == "F") {
gpa = 0;
}
if (gpa == "a") {
gpa = 4;
}
if (gpa == "b") {
gpa = 3;
}
if (gpa == "c") {
gpa = 2;
}
if (gpa == "d") {
gpa = 1;
}
if (gpa == "f") {
gpa = 0;
}
document.getElementById("result4").innerHTML = gpa;
}
</script>
<body>
<form action="" id="it5413">Enter your grade in the form of a letter grade for class IT 5413:<br>
<input type="text" name="gpa4" value="">
<input type="button" name="button" value="Calculate" onClick="calculateGpa4(this.form)">
</form>
<div id="result4"></div>
<br>
<input type="button" id="final" name="button" value="Calculate" onClick="calculate()">
<div id="total"></div>
<br><br><br><br><br> <br><br><br><br><br><br>
<div id="result"></div>
</body>
</html>本文标签： htmlJavascript GPA CalculatorStack Overflow
版权声明：本文标题：html - Javascript GPA Calculator - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744675355a2619075.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论