排除JS和FF onclick问题

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

仅仅使用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 - 当所有框架都以真正可靠的方式解决它时，无需自己处理这类问题。

Answer 2

不知道它会解决这个问题，但这里有一些需要考虑的第一个步骤：你并不需要把javascript:在onclick

。

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

Answer 3

尝试下载firebug。它会帮助你在Firefox中调试你的javascript。