Javascript適用於IE 8，但不適用於Firefox 30

Question

以下功能實現了我希望在IE 8中實現的功能，但沒有在Firefox 30中實現它的功能。目的是，選中技能框將使用戶能夠修改數量文本框，取消選中該框應恢復原始值並將其重新設置為只讀。

function updateQuantity(refNum) {
  var quantity = 'quantity' + refNum;
  var startQuantity = 'startQuantity' + refNum;
  var skill = 'skill' + refNum;

  if (!document.getElementById(skill).checked){
    document.getElementById(quantity).disabled = true;
    document.getElementById(quantity).readOnly = true;
    document.getElementById(quantity).style.color = "rgb(192,192,192)";
    document.getElementById(quantity).value = document.getElementById(startQuantity).value;
  } else {
    document.getElementById(quantity).disabled = false;
    document.getElementById(quantity).readOnly = false;
    document.getElementById(quantity).style.color = "rgb(0,0,0)";
  }
}

這是行使功能的HTML代碼段。

<tr><td>Toughness</td>
  <td></td>
  <td>10 ^ (100 total)</td>
  <td><input type="checkbox" name="skill8" value="Toughness" onclick="updateQuantity(8);updateTotal(8);">
  <input style="color:rgb(192,192,192);" disabled readonly type="text" name="quantity8" maxlength="2" size="2" value="4" onclick="updateTotal(8);">
  <input type="hidden" name="startQuantity8" value="4"></td></tr>
<tr style="background:rgb(80,30,30);"><td>Light Armor</td>
  <td></td>
  <td>20</td>
  <td><input type="checkbox" name="skill9" value="Light Armor" onclick="updateQuantity(9);updateTotal(9);">
  <input style="color:rgb(192,192,192);" disabled readonly type="text" name="quantity9" maxlength="2" size="2" value="1" onclick="updateTotal(9);">
  <input type="hidden" name="startQuantity9" value="1"></td></tr>

我嘗試將腳本定義移至本節的末尾，但這不能解決問題。 我在Firefox調試器中收到以下錯誤：嘗試在if語句中對其進行評估時，document.getElementById（skill）為null。 有什么想法嗎？

Answer 1

好吧，Firefox是正確的，沒有元素具有這樣的ID 。 從MSDN文檔中 ：

在IE7標准模式和以前的模式下，此方法對ID和NAME屬性執行不區分大小寫的匹配，這可能會產生意外的結果。 有關更多信息，請參見定義文檔兼容性 。

看一下您的HTML，看來正在發生什么：

<input type="checkbox" name="skill8" ... />

可能的解決方案 ：

• 將一個id屬性添加到您希望通過getElementById引用的所有元素。
• 請改用getElementsByName 。