2016-12-10 6 views
-2

私は、シャツの総コストを個別に計算するか、最終合計を計算するために一緒に追加された単純なページを作成しようとしています。私は非常に近いと思うが、私は入力ボックスに追加または表示する合計を得ることができません。多分あなたたちは私を助けることができます。クラスと教師のための最終的なプロジェクトのためのその私のいずれかを助けるようだ。インターネットで私を助けてください!!!!!シンプルなJavaScriptの計算

ここは私のコードです:関数の先頭は頭にあり、関数の呼び出しは底に向かっています。

<!doctype html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <title>Shirts</title> 
    <link href="styles/eccomercestyle.css" rel="stylesheet" type="text/css"> 
    <script type="text/javascript"> 

    // cost of items in dollars 
    var costShirt = 10; 



     function updateTotal(){ 
     var tot = 0; 
     tot += f.blackShirt.value * costBlack + 
    f.whiteShirt.value * costWhite + 
    f.blueShirt.value * costBlue; 
     document.getElementById("cost").value = tot.toFixed(2); 
     } 

    </script> 
    </head> 


    <body> 
<div id="logo"> <a href="index.html"> <img src="instalogo.png" width="493" height="91" alt="Return home"/> </a> </div> 
<h1 style="font-family: Segoe, 'Segoe UI', 'DejaVu Sans', 'Trebuchet MS', Verdana, sans-serif; font-size: medium; color: #FF7208;">Choose a style.</h1> 
<div id="container"> 
    <table width="200" border="1" bordercolor="black"> 
    <tbody> 
     <tr> 
     <td><img src="blackcottonPNG.png" width="160" height="200" alt="Choose a quantity"/> 

      <br> 
     <form action="" method="POST" name="myForm" id="myForm"> 
     <label for="blackShirt"><strong>Black T $10.00 x </strong></label> 
      <select id="blackShirt"> 
       <option>0</option> 
       <option>1</option> 
       <option>2</option> 
       <option>3</option> 
       </select> 
      </br> 
     </td> 

     <td><img src="whitecottonPNG.png" width="160" height="200" alt="Choose a quantity"/> 
         <br> 
     <label for="whiteShirt"><strong>Black T $10.00 x </strong></label> 
     <select id="whiteShirt"> 
       <option>0</option> 
       <option>1</option> 
       <option>2</option> 
       <option>3</option> 
       </select> 
      </br> 
      </td> 

     <td><img src="bluecottonPNG.png" width="160" height="200" alt="Choose a quantity"/> 
      <br> 
      <label for="blueShirt"><strong>Black T $10.00 x </strong></label> 
      <select id="blueShirt"> 
       <option>0</option> 
       <option>1</option> 
       <option>2</option> 
       <option>3</option> 
       </select> 
      </br> 
      </form></td> 
     </tr> 
     </tbody> 
    </table> 

    <h3>SUBTOTAL:</h3> 
    <div> $ 
    <input type="text" id="cost" value="0" readonly size="3"/> 
    </div> 
    <div> 
    <input type="submit"/> 
    </div> 
</main> 

    <script type="text/javascript"> 
     var f = document.forms['myForm']; 
     var sel = document.getElementsByTagName("select"); 


     for(var i=0; i<sel.length; i++) { 
     sel[i].onchange = function(){updateTotal()}; 
     } 

    // here the form data is submitted to the server 
     f.onsubmit = function(){ 
     alert("Your total cost will be: $" + f.cost.value); 
     return false; 
     } 
     </script> 
    </div> 
</body> 
</html> 
+2

ステップ1を実行する必要があります。あなたの先生があなたを助けることができないならば、あなたはひどい先生がいます。 – j08691

+0

教えてください!彼が来たので、古い教師はちょうど上と左、彼の言い訳は彼が多くのコーダーではないゲームデザイナーだということです。 –

答えて

0

要素に値を割り当てることで値を設定することはできません。これにはsetAttributeメソッドを使用します。お使いのブラウザのコンソールを開き、あなたが持っているもののエラー参照:だから、あなたは

document.getElementById("cost").setAttribute('value', tot.toFixed(2)); 

document.getElementById("cost").value = tot.toFixed(2); 

を変更chouldトリック...