2011-01-27 48 views
0

這裏是代碼初始化我的表:HTML的輸入不響應的onkeyup

<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:

<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> 

注意,我宣佈更多的表和其他的onkeyup功能,但由於某種原因,該表格後面的所有表格(我有大約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 2011-01-27 23:31:13

+0

然後你能告訴我們至少最後一張表(和相應的事件處理程序)能夠正常工作,你可能已經在那裏打破了一些東西。此外,我建議你稍微重構一下你的代碼,所有這些事件處理程序幾乎是一樣的。 – 2011-01-27 23:35:15

+0

我已經發布了最後一個工作表的代碼。 – CodeGuy 2011-01-27 23:39:20

回答

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

theTotal = all[48]; 

你爲什麼要這麼做?首先計算所有價格的總和,然後只將最後一個值分配給theTotal。這對我來說似乎是錯誤的。

0

你缺少的ID「mySpan」的元素,雖然你正在尋找因爲它在你的JS(document.getElementById("mySpan").innerHTML),因此它是錯誤的。

添加一個帶有該ID的HTML元素,它應該工作。

檢查的jsfiddle:http://jsfiddle.net/Chandu/yVaMx/5/