2011-01-27 6 views
0

をonkeyupのに応答して、私のテーブルを初期化するコードではありません。HTMLの入力はここで

<table cellspacing="0"> 
     <caption id="title4"> 
      Sprinkles (5 - 6 oz.) 
        </caption> 
     <thead> 
      <tr> 
       <th>&nbsp;</th> 
            <td >Price</td> 
            <td >Quantity</td> 
          </tr> 
     </thead> 
     <tbody> 
         <tr class="statement4"> 
       <th><label>Lemon</label></th> 
           <td title="Yes" > 
        <label>$6.50</label> 
       </td> 
           <td title="No" > 
        <input id="s1" name="s1" class="field text small" type="text" value="0"/> 
       </td> 
          <tr class="statement4"> 
       <th><label>Sweet Apple</label></th> 
           <td title="Yes" > 
        <label>$6.50</label> 
       </td> 
           <td title="No" > 
        <input id="s2" name="s2" class="field text small" type="text" value="0"/> 
       </td> 

       <tr class="statement4"> 
       <th><label>Sweet Caramel</label></th> 
           <td title="Yes" > 
        <label>$6.50</label> 
       </td> 
           <td title="No" > 
        <input id="s3" name="s3" class="field text small" type="text" value="0"/> 
       </td> 

       <tr class="statement4"> 
       <th><label>Sweet Cinnamon</label></th> 
           <td title="Yes" > 
        <label>$6.50</label> 
       </td> 
           <td title="No" > 
        <input id="s4" name="s4" class="field text small" type="text" value="0"/> 
       </td> 

       <tr class="statement4"> 
       <th><label>Sweet Mocha</label></th> 
           <td title="Yes" > 
        <label>$6.50</label> 
       </td> 
           <td title="No" > 
        <input id="s5" name="s5" class="field text small" type="text" value="0"/> 
       </td> 
         </tr> 
        </tbody> 
    </table> 

そして、ここでは私のjavascriptです:私は複数のテーブルと宣言し、他のonKeyUpを機能を持っている

<script type="text/javascript"> 
var total = 0.0; 
var all=new Array(); 
for(var i = 0; i < 49; i++) 
    all[i] = 0; 

//....I OMMITTED CODE HERE FOR THE REST OF THE onkeyup FUNCTIONS 
document.getElementById("s1").onkeyup = function() { 
    if(this.value != "") { 
     all[44] = (parseInt(this.value,10) * 6.50); 
    } 
    else { 
     all[44] = 0; 
    } 
    updateIt(); 
}; 

document.getElementById("s2").onkeyup = function() { 
    if(this.value != "") { 
     all[45] = (parseInt(this.value,10) * 6.50); 
    } 
    else { 
     all[45] = 0; 
    } 
    updateIt(); 
}; 

document.getElementById("s3").onkeyup = function() { 
    if(this.value != "") { 
     all[46] = (parseInt(this.value,10) * 6.50); 
    } 
    else { 
     all[46] = 0; 
    } 
    updateIt(); 
}; 
document.getElementById("s4").onkeyup = function() { 
    if(this.value != "") { 
     all[47] = (parseInt(this.value,10) * 6.50); 
    } 
    else { 
     all[47] = 0; 
    } 
    updateIt(); 
}; 

document.getElementById("s5").onkeyup = function() { 
    document.getElementById("mySpan").innerHTML = "WOAH"; 

    if(this.value != "") { 
     all[48] = (parseInt(this.value,10) * 6.50); 
    } 
    else { 
     all[48] = 0; 
    } 
    updateIt(); 
}; 

function updateIt() { 
    var theTotal = 0; 
    for(var j = 0; j < 49; j++) 
     theTotal += all[j]; 

    theTotal = all[48]; 
    document.getElementById("mySpan").innerHTML = "$" + theTotal.toFixed(2); 
} 
</script> 

注意何らかの理由で、このテーブルの後にあるすべてのテーブル(私は6つのテーブルがあり、最初の3つは正常に動作します)は、それぞれのonkeyupイベントに応答しません。あなたが探しているものの

<table cellspacing="0"> 
    <caption id="title4"> 
     Rubs (1.2 - 2.3oz.) 
       </caption> 
    <thead> 
     <tr> 
      <th>&nbsp;</th> 
           <td >Price</td> 
           <td >Quantity</td> 
         </tr> 
    </thead> 
    <tbody> 
        <tr class="statement4"> 
      <th><label>Buffalo</label></th> 
          <td title="Yes" > 
       <label>$4.25</label> 
      </td> 
          <td title="No" > 
       <input id="rubs1" name="rubs1" class="field text small" type="text" value="0"/> 
      </td> 
         <tr class="statement4"> 
      <th><label>Chipotle</label></th> 
          <td title="Yes" > 
       <label>$4.25</label> 
      </td> 
          <td title="No" > 
       <input id="rubs2" name="rubs2" class="field text small" type="text" value="0"/> 
      </td> 

      <tr class="statement4"> 
      <th><label>Citrus</label></th> 
          <td title="Yes" > 
       <label>$4.25</label> 
      </td> 
          <td title="No" > 
       <input id="rubs3" name="rubs3" class="field text small" type="text" value="0"/> 
      </td> 

      <tr class="statement4"> 
      <th><label>Creole</label></th> 
          <td title="Yes" > 
       <label>$4.25</label> 
      </td> 
          <td title="No" > 
       <input id="rubs4" name="rubs4" class="field text small" type="text" value="0"/> 
      </td> 

      <tr class="statement4"> 
      <th><label>Crushed Peppercorn & Garlic</label></th> 
          <td title="Yes" > 
       <label>$4.25</label> 
      </td> 
          <td title="No" > 
       <input id="rubs5" name="rubs5" class="field text small" type="text" value="0"/> 
      </td> 

      <tr class="statement4"> 
      <th><label>Greek</label></th> 
          <td title="Yes" > 
       <label>$4.25</label> 
      </td> 
          <td title="No" > 
       <input id="rubs6" name="rubs6" class="field text small" type="text" value="0"/> 
      </td> 

      <tr class="statement4"> 
      <th><label>Jamaican Jerk</label></th> 
          <td title="Yes" > 
       <label>$4.25</label> 
      </td> 
          <td title="No" > 
       <input id="rubs7" name="rubs7" class="field text small" type="text" value="0"/> 
      </td> 

      <tr class="statement4"> 
      <th><label>Lemon Pepper</label></th> 
          <td title="Yes" > 
       <label>$4.25</label> 
      </td> 
          <td title="No" > 
       <input id="rubs8" name="rubs8" class="field text small" type="text" value="0"/> 
      </td> 

      <tr class="statement4"> 
      <th><label>Moroccan/label></th> 
          <td title="Yes" > 
       <label>$4.25</label> 
      </td> 
          <td title="No" > 
       <input id="rubs9" name="rubs9" class="field text small" type="text" value="0"/> 
      </td> 

      <tr class="statement4"> 
      <th><label>Smoky Barbecue</label></th> 
          <td title="Yes" > 
       <label>$4.25</label> 
      </td> 
          <td title="No" > 
       <input id="rubs10" name="rubs10" class="field text small" type="text" value="0"/> 
      </td> 

      <tr class="statement4"> 
      <th><label>Thai Red Curry</label></th> 
          <td title="Yes" > 
       <label>$4.25</label> 
      </td> 
          <td title="No" > 
       <input id="rubs11" name="rubs11" class="field text small" type="text" value="0"/> 
      </td> 
        </tr> 
       </tbody> 
</table> 
+2

あなたのHTMLには、テーブル行の終了タグ( '')がたくさんあります。 – jmbucknall

+0

次に、正しく動作する最後のテーブル(および対応するイベントハンドラ)を表示することができますか、そこに何か壊れている可能性があります。さらに、あなたのコードをリファクタリングすることをお勧めします。これらのイベントハンドラはすべてほぼ同じです。 –

+0

最後に働いたテーブルのコードを掲載しました。 – CodeGuy

答えて

0
var theTotal = 0; 
for(var j = 0; j < 49; j++) 
    theTotal += all[j]; 

theTotal = all[48]; 

は、なぜあなたはこれをやっていますか?まずすべての価格の合計を計算し、最後の値のみをtheTotalに割り当てます。これは私にとっては間違っているようです。

+0

私はこれを試していました...論理は違いはありません。私がonkeyup関数を呼び出す方法を知ることができないという事実です。 – CodeGuy

+0

@ reising1:Cyber​​nateのフィドルからその行を削除すると、少なくともFirefoxの4b9では私にとっては(それはうまくいく)(http://jsfiddle.net/yVaMx/6/)。 –

0

あなたはID「mySpan」によって要素が欠落している:ここでは

が働いていた最後の表のコードです(このコードは、私は上記の投稿の表を作成し、右のコードの上にあります)あなたのJS(document.getElementById("mySpan").innerHTML)のそれのため、それは誤りです。

このIDを持つHTML要素を追加するとうまくいくはずです。

チェックjsfiddle:http://jsfiddle.net/Chandu/yVaMx/5/

+0

私はそれを持っている、私はちょうどそれのためのコードを表示していない。上で述べたように、私はこの上にあるテーブルをもう少し持っていて、 "mySpan"を更新します。 – CodeGuy

+0

しかし、mySpan要素を追加すると、キーアップイベントがトリガーされているのを見ることができます(jsFiddle:http://jsfiddle.net/Chandu/yVaMx/5 /) – Chandu

関連する問題