2016-03-29 14 views
-1

誰でも私のgpa電卓で間違っていることを理解できますか?私は、ユーザーが3つの特定のクラスの文字グレードを入力できるようにするWebページに取り組んでいます。私は、文字のグレードをポイント値に変換するhtmlおよびjavascriptコードを作成しました。また、ポイントグレードを一緒に加え、4で割って3つのクラスのGPAを出力する関数を作成しました。私はこれを数週間働いていて、何が間違っているのか分かりません。私は何をしようとしていることをするためのさまざまな方法があると確信しています。しかし、私はコードを書いたやり方が私には最も合理的なので、コードを作る方法を探しています。おかげJavascript GPA電卓

<!DOCTYPE html> <html> 
 

 
<head> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" 
 
href="styles.css"> <title>Center for Health Information Technology 
 
</title> 
 
\t <script type="text/javascript"> 
 
\t function calculate() 
 
\t { 
 
\t \t var x=document.getElementById("result1").value; 
 
\t \t var y=document.getElementById("result2").value; 
 
\t \t var z=document.getElementById("result3").value; 
 
\t \t var a=document.getElementById("result4").value; 
 
\t \t var result1=parseFloat(x) + parseFloat(y) + parseFloat(z) 
 
\t \t + parseFloat(a); // conversion to numbers; this is necessary for +, other operators will automatically convert 
 
\t \t var result5=x%y; 
 
\t \t 
 
\t \t //build a string first and then display it all together. 
 
\t \t //don't forget HTML tags in your output! 
 

 
\t \t var html="<p>Your GPA is: "+result1/4+"</p>"; 
 
\t 
 

 

 
\t \t 
 
\t \t document.getElementById("total").innerHTML=html; 
 
\t } 
 
\t 
 
\t 
 
\t </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 coming and Cert HIT has some student assistant positions open. 
 
In order to be considered for such a position, a student has to complete 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; 
 
     \t } 
 
     if (gpa == "F") { 
 
      gpa = 0; 
 
     \t } 
 
     if (gpa == "a") { 
 
      gpa = 4; 
 
      } 
 
     if (gpa == "b") { 
 
      gpa = 3; 
 
      } 
 
     if (gpa == "c") { 
 
      gpa = 2; 
 
      } 
 
     if (gpa == "d") { 
 
      gpa = 1; 
 
     \t } 
 
     if (gpa == "f") { 
 
      gpa = 0; 
 
     \t } 
 
    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; 
 
     \t } 
 
     if (gpa == "F") { 
 
      gpa = 0; 
 
     \t } 
 
     if (gpa == "a") { 
 
      gpa = 4; 
 
      } 
 
     if (gpa == "b") { 
 
      gpa = 3; 
 
      } 
 
     if (gpa == "c") { 
 
      gpa = 2; 
 
      } 
 
     if (gpa == "d") { 
 
      gpa = 1; 
 
     \t } 
 
     if (gpa == "f") { 
 
      gpa = 0; 
 
     \t } 
 
    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; 
 
     \t } 
 
     if (gpa == "F") { 
 
      gpa = 0; 
 
     \t } 
 
     if (gpa == "a") { 
 
      gpa = 4; 
 
      } 
 
     if (gpa == "b") { 
 
      gpa = 3; 
 
      } 
 
     if (gpa == "c") { 
 
      gpa = 2; 
 
      } 
 
     if (gpa == "d") { 
 
      gpa = 1; 
 
     \t } 
 
     if (gpa == "f") { 
 
      gpa = 0; 
 
     \t } 
 
    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; 
 
     \t } 
 
     if (gpa == "F") { 
 
      gpa = 0; 
 
     \t } 
 
     if (gpa == "a") { 
 
      gpa = 4; 
 
      } 
 
     if (gpa == "b") { 
 
      gpa = 3; 
 
      } 
 
     if (gpa == "c") { 
 
      gpa = 2; 
 
      } 
 
     if (gpa == "d") { 
 
      gpa = 1; 
 
     \t } 
 
     if (gpa == "f") { 
 
      gpa = 0; 
 
     \t } 
 
    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"> 
 
\t function calculate() 
 
\t { 
 
\t \t var x=document.getElementById("result1").value; 
 
\t \t var y=document.getElementById("result2").value; 
 
\t \t var z=document.getElementById("result3").value; 
 
\t \t var a=document.getElementById("result4").value; 
 
\t \t var result1=parseFloat(x) + parseFloat(y) + parseFloat(z) 
 
\t \t + parseFloat(a); // conversion to numbers; this is necessary for +, other operators will automatically convert 
 
\t \t var result5=x%y; 
 
\t \t 
 
\t \t //build a string first and then display it all together. 
 
\t \t //don't forget HTML tags in your output! 
 

 
\t \t var html="<p>Your GPA is: "+result1/4+"</p>"; 
 
\t 
 

 

 
\t \t 
 
\t \t document.getElementById("total").innerHTML=html; 
 
\t } 
 
\t 
 
\t 
 
\t </script> 
 

 

 

 

 

 
<div id="total"></div> 
 
<br><br><br><br><br> <br><br><br><br><br><br> 
 
<div id="result"></div> 
 
</body> 
 

 

 
</html>

+0

あなたは.innerHTML' 'に数値等級を入れているが、その後、'計算は、() '' .value'でそれを読み取ろうとします。それを読むには '.innerHTML'を使う必要があります。 – Barmar

答えて

1

はまあ、あなたの主な問題は、あなたが値関数を使用して結果1 - result4のうち、numbericデータを取得しようとしているということです。しかし、div要素には値の関数がないので、innerTextを使う必要があります。

他にもいくつか問題があります:calculate()を2回定義していて、どちらが実行されるかを知る方法がありません。

また、4つの公開タグがあります。&クローズドボディタグを1つだけ開いてください。

<!DOCTYPE html> <html> 
 

 
<head> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" 
 
href="styles.css"> <title>Center for Health Information Technology 
 
</title> 
 
\t <script type="text/javascript"> 
 
\t function calculate() 
 
\t { 
 
\t \t var x=document.getElementById("result1").innerText; 
 
\t \t var y=document.getElementById("result2").innerText; 
 
\t \t var z=document.getElementById("result3").innerText; 
 
\t \t var a=document.getElementById("result4").innerText; 
 
\t \t var result1=parseFloat(x) + parseFloat(y) + parseFloat(z) 
 
\t \t + parseFloat(a); // conversion to numbers; this is necessary for +, other operators will automatically convert 
 
\t \t var result5=x%y; 
 
\t \t 
 
\t \t //build a string first and then display it all together. 
 
\t \t //don't forget HTML tags in your output! 
 

 
\t \t var html="<p>Your GPA is: "+result1/4+"</p>"; 
 
\t 
 

 

 
\t \t 
 
\t \t document.getElementById("total").innerHTML=html; 
 
\t } 
 
\t 
 
\t 
 
\t </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 coming and Cert HIT has some student assistant positions open. 
 
In order to be considered for such a position, a student has to complete 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; 
 
     \t } 
 
     if (gpa == "F") { 
 
      gpa = 0; 
 
     \t } 
 
     if (gpa == "a") { 
 
      gpa = 4; 
 
      } 
 
     if (gpa == "b") { 
 
      gpa = 3; 
 
      } 
 
     if (gpa == "c") { 
 
      gpa = 2; 
 
      } 
 
     if (gpa == "d") { 
 
      gpa = 1; 
 
     \t } 
 
     if (gpa == "f") { 
 
      gpa = 0; 
 
     \t } 
 
    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; 
 
     \t } 
 
     if (gpa == "F") { 
 
      gpa = 0; 
 
     \t } 
 
     if (gpa == "a") { 
 
      gpa = 4; 
 
      } 
 
     if (gpa == "b") { 
 
      gpa = 3; 
 
      } 
 
     if (gpa == "c") { 
 
      gpa = 2; 
 
      } 
 
     if (gpa == "d") { 
 
      gpa = 1; 
 
     \t } 
 
     if (gpa == "f") { 
 
      gpa = 0; 
 
     \t } 
 
    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; 
 
     \t } 
 
     if (gpa == "F") { 
 
      gpa = 0; 
 
     \t } 
 
     if (gpa == "a") { 
 
      gpa = 4; 
 
      } 
 
     if (gpa == "b") { 
 
      gpa = 3; 
 
      } 
 
     if (gpa == "c") { 
 
      gpa = 2; 
 
      } 
 
     if (gpa == "d") { 
 
      gpa = 1; 
 
     \t } 
 
     if (gpa == "f") { 
 
      gpa = 0; 
 
     \t } 
 
    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; 
 
     \t } 
 
     if (gpa == "F") { 
 
      gpa = 0; 
 
     \t } 
 
     if (gpa == "a") { 
 
      gpa = 4; 
 
      } 
 
     if (gpa == "b") { 
 
      gpa = 3; 
 
      } 
 
     if (gpa == "c") { 
 
      gpa = 2; 
 
      } 
 
     if (gpa == "d") { 
 
      gpa = 1; 
 
     \t } 
 
     if (gpa == "f") { 
 
      gpa = 0; 
 
     \t } 
 
    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>

+0

* innerText *は独自のIEプロパティで、W3C標準の* textContent *を使用するほうがはるかに優れています。 – RobG

+0

余分なbodyタグを削除し、calculate()関数で.valueを削除しようとしました。しかし、それはまだ動作しません。私は計算関数から計算されたgpaを出力するdiv要素を使用しています。 4つのcalculateGpa関数で出力された数値をどのようにして計算関数に入力すればよいですか? – Stephen

+0

@RobG私は実際にinnerHTMLを使用するつもりですが、textContentは – xrgb