2016-09-08 10 views
0

私は現在、HTML/JavaScriptでプログラムを作成しており、数時間にわたり数時間にわたる研究と解答なしで勉強しています。私のプログラム/サイトには、ユーザーに4つの異なるカテゴリの成績を入力するように求める表があります。次に、平均を計算するためにボタンをクリックすると、それらの4つの値を取ってから正しい重み付けで平均し、その結果を新しいページ区画に表示します。私は出力を表示することができないと私は理由を把握することはできません。HTML/Javascriptの等級平均計算

これが死んでいて以前に回答されている場合はお詫び申し上げます。

<html> 
<head> 
    <title> Grade Average Calculator </title> 
</head> 

<body> 

<p> 
    <h2>Grade Average Calculator</h2> 
    <h3>Please Enter Your Grade For Each Section</h3> 
    <TABLE BORDER=2 CELLSPACING=2 CELLPADDING=2> 

    <tr> 
    <td>Type</td> 
    <td>Weight</td> 
    <td>Grade</td> 
    </tr> 

    <tr> 
    <td>Homework</td> 
    <td>25%</td> 
    <td><input type="text" id="homework" size=2 value=""></td> 
    </tr> 

    <tr> 
    <td>Labs</td> 
    <td>20%</td> 
    <td><input type="text" id="labs" size=2 value=""></td> 
    </tr> 

    <tr> 
    <td>Midterm</td> 
    <td>25%</td> 
    <td><input type="text" id="midterm" size=2 value=""></td> 
    </tr> 

    <tr> 
    <td>Final Exam</td> 
    <td>30%</td> 
    <td><input type="text" id="finals" size=2 value=""></td> 
    </tr> 

    <br><br> 
</p> 
    <input type="button" value="Calculate Your Grade" 
     onclick="calculator()"> 

    <hr> 
    <div id="outputDiv" style="height: 50px; width: 100%;"></div> 

    <script type="text/javascript"> 

     function calculator() 
     { 
      var grade1=parseFloat(document.getElementById('homework').value*0.25); 
      var grade2=parseFloat(document.getElementById('labs').value*0.20); 
      var grade3=parseFloat(document.getElementById('midterm').value*0.25); 
      var grade4=parseFloat(document.getElementById('finals').value*0.30); 
      var total=grade1+grade2+grade3+grade4; 

      var display=document.getElementById('outputDiv')display.innerHTML='Your Final Grade Is: '; 
     } 
    </script> 
</body> 

+1

使用するvar表示=のdocument.getElementById( 'outputDiv')display.innerHTML =。 'あなたの最終学年は:' +合計; –

答えて

1

私が動作するようにあなたのコードを更新しました。あなたは合計を表示されませんという問題は、あなただけの

を表示する 'あなたの最終学年です:'

<html> 
<head> 
    <title> Grade Average Calculator </title> 
</head> 

<body> 

<p> 
    <h2>Grade Average Calculator</h2> 
    <h3>Please Enter Your Grade For Each Section</h3> 
    <TABLE BORDER=2 CELLSPACING=2 CELLPADDING=2> 

    <tr> 
    <td>Type</td> 
    <td>Weight</td> 
    <td>Grade</td> 
    </tr> 

    <tr> 
    <td>Homework</td> 
    <td>25%</td> 
    <td><input type="text" id="homework" size=2 value=""></td> 
    </tr> 

    <tr> 
    <td>Labs</td> 
    <td>20%</td> 
    <td><input type="text" id="labs" size=2 value=""></td> 
    </tr> 

    <tr> 
    <td>Midterm</td> 
    <td>25%</td> 
    <td><input type="text" id="midterm" size=2 value=""></td> 
    </tr> 

    <tr> 
    <td>Final Exam</td> 
    <td>30%</td> 
    <td><input type="text" id="finals" size=2 value=""></td> 
    </tr> 

    <br><br> 
</p> 
    <input type="button" value="Calculate Your Grade" 
     onclick="calculator()"> 

    <hr> 
    <div id="outputDiv" style="height: 50px; width: 100%;"></div> 

    <script type="text/javascript"> 

     function calculator() 
     { 
      var grade1=parseFloat(document.getElementById('homework').value*0.25); 
      var grade2=parseFloat(document.getElementById('labs').value*0.20); 
      var grade3=parseFloat(document.getElementById('midterm').value*0.25); 
      var grade4=parseFloat(document.getElementById('finals').value*0.30); 
      var total=grade1+grade2+grade3+grade4; 

      var display=document.getElementById('outputDiv'); 

      display.innerHTML='Your Final Grade Is: ' +total; 
     } 
    </script> 
+0

ありがとうございます。私はそれが何かシンプルであることを知っていましたが、私は一点で合計値を持っていましたが、忘れた主な点は、表示変数の後にセミコロンを入れてからinnerHTMLを次の行に移動することでした。乾杯!!! – Darkenvar