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>

我试过将脚本定义移到该部分的末尾，但这并没有解决问题。当我尝试在 if 语句中对其求值时，Firefox 调试器出现 document.getElementById(skill) 为空的错误。有什么想法吗？

Answer 1

嗯，Firefox 是正确的，没有元素具有这样的 ID。来自 MSDN documentation:

In IE7 Standards mode and previous modes, this method performs a case-insensitive match on both the ID and NAME attributes, which might produce unexpected results. For more information, see Defining Document Compatibility.

看看你的 HTML，这似乎是正在发生的事情：

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

可能的解决方案：

将 id 属性添加到您希望通过 getElementById 引用的所有元素。
改用getElementsByName。

Javascript 适用于 IE 8，但不适用于 Firefox 30

Javascript works in IE 8, but not Firefox 30

javascript

firefox

internet-explorer

getelementbyid