Question

我希望有人可以查看我的代码并让我知道它在FF中失败的地方。基本上，onclick函数没有触发。这是JS：

function clear_field(field) {
            if (field.value==field.defaultValue) {
                    field.value=''
            }
    }
function calsq(form) {
 var tonf = 0.010000000000000002; // cubic feet to tons
 var cyards = 0.037;
 var rwunit = eval(fill.rwunit.value); //ft or in
 var rwidth = eval(fill.rwidth.value); //quantity
 var rwv = (rwidth) / (rwunit); // value now in feet
 var rlunit = eval(fill.rlunit.value); //ft or in
 var rlength = eval(fill.rlength.value); //quantity
 var rlv = (rlength) / (rlunit); // value now in feet
 var rthick = eval(fill.rthick.value); //quantity
 var rtv = (rthick) / 12; // value now in feet
 var rcir = 0; // factor 1728 cubic inches
 var rcyr = 0; // factor 27 cubic yards

 fill.rcyr.value = Math.round(((rwv) * (rlv) * (rtv) * (cyards)) * 10000) / 10000; // value now in cubic yards
}

以下是表格：

<form name="fill">
  <input name="rcyr" type="text" value="0" size="10" maxlength="8" readonly="readonly" id="soil_total" />
  <table border="0" align="center" cellpadding="6" cellspacing="0">
      <td align="right"> <p>width </p></td>
      <td><input name="rwidth" type="text" class="values" onfocus="clear_field(this)" value="0" /></td>
      <td><select name="rwunit">
          <option value = "1" selected="selected">Feet </option>
          <option value = "12">Inches </option>
        </select></td>
    </tr>
    <tr>
      <td align="right"> <p>length </p></td>
      <td><input name="rlength" type="text" class="values" onfocus="clear_field(this)" value="0" /></td>
      <td><select name="rlunit">
          <option value = "1" selected="selected">Feet </option>
          <option value = "12">Inches </option>
        </select></td>
    </tr>
    <tr>
      <td align="right"><p>depth</p></td>
      <td colspan="2"><select name="rthick">
          <option value = "2">2 Inches</option>
          <option value = "4">4 Inches</option>
          <option value = "6" selected="selected">6 Inches</option>
        </select>
        <input type="hidden" name="rcmunit" value = "2" /></td>
    </tr>
  </table>
  <input type="button" onclick="javascript:calsq('fill')" src="soil_calculator/images/soil_calculate.png" value="calc" />
</form>

所有其他浏览器都会触发事件并计算总数，但Firefox不会。非常感谢任何帮助。

已更新

非常感谢所有的意见和建议。以下是工作代码。

function calsq(form) {
var tonf = 0.010000000000000002; // cubic feet to tons
var cyards = 0.037;
var rwunit = +document.forms.fill.rwunit.value; //ft or in
var rwidth = +document.forms.fill.rwidth.value; //quantity
var rwv = (rwidth) / (rwunit); // value now in feet
var rlunit = +document.forms.fill.rlunit.value; //ft or in
var rlength = +document.forms.fill.rlength.value; //quantity
var rlv = (rlength) / (rlunit); // value now in feet
var rthick = +document.forms.fill.rthick.value; //quantity
var rtv = (rthick) / 12; // value now in feet
var rcir = 0; // factor 1728 cubic inches
var rcyr = 0; // factor 27 cubic yards
document.forms.fill.rcyr.value = Math.round(((rwv) * (rlv) * (rtv) * (cyards)) * 10000) / 10000; // value now in cubic yards

}

和表格：

<form name="fill">
  <input name="rcyr" type="text" value="0" size="10" maxlength="8" readonly="readonly" id="soil_total" />
  <table border="0" align="center" cellpadding="6" cellspacing="0">

      <td align="right"> <p>width </p></td>
      <td><input name="rwidth" type="text" class="values" onfocus="clear_field(this)" value="0" /></td>
      <td><select name="rwunit">
          <option value = "1" selected="selected">Feet </option>
          <option value = "12">Inches </option>
        </select></td>
    </tr>
    <tr>
      <td align="right"> <p>length </p></td>
      <td><input name="rlength" type="text" class="values" onfocus="clear_field(this)" value="0" /></td>
      <td><select name="rlunit">
          <option value = "1" selected="selected">Feet </option>
          <option value = "12">Inches </option>
        </select></td>
    </tr>
    <tr>
      <td align="right"><p>depth</p></td>
      <td colspan="2"><select name="rthick">
          <option value = "2">2 Inches</option>
          <option value = "4">4 Inches</option>
          <option value = "6" selected="selected">6 Inches</option>
        </select>
        <input type="hidden" name="rcmunit" value = "2" /></td>
    </tr>
  </table>
  <img src="soil_calculator/images/soil_calculate.png" width="160" height="43" alt="Calculate Volume" onclick="calsq('document.forms.fill')" style="cursor:pointer"/>
</form>

谢谢！

Answer 1

不确定它是否能解决问题，但这里有一些需要考虑的第一步：

您无需将javascript:放入onclick。

将所有eval(...)替换为rwunit = +fill.rwunit.value;之类的内容，它会将其转换为数字。并向我们所有人承诺，永远不会再使用eval。

Answer 2

尝试下载firebug。它将帮助您在Firefox中调试您的JavaScript。

Answer 3

仅使用fill不是一种在FF中引用表单的功能方法。有关示例，请参阅http://jsfiddle.net/nrabinowitz/yLELV/2/。

Click 1按钮尝试引用fill;它适用于Chrome但在FF中失败。
Click 2按钮引用document.forms.fill，适用于FF和Chrome。

正如其他人所指出的那样，我不确定这是你脚本中唯一的问题，但它确实会在FF中以fill is not defined而死。

顺便说一下，我在SO上看到很多类似的问题，我的第一个问题是，你为什么不使用框架库？如果您想进行任何类型的DOM操作，请查看jQuery，Prototype或MooTools - 您无需自己处理此类问题当所有框架都以非常可靠的方式解决它时。

解决JS和FF onclick问题

3 个答案: