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

在IE7标准模式和之前的模式中，此方法对 ID 和 NAME 属性执行不区分大小写的匹配，这可能会产生意外结果。有关详细信息，请参阅Defining Document Compatibility。

看看你的HTML，看起来正在发生的事情：

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

可能的解决方案：

通过id向您要引用的所有元素添加getElementById属性。
请改用getElementsByName。

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

1 个答案: