Javascript計算器不能在火狐工作

Question

我有一個美化公司的簡單的面積計算器，它只在鉻，IE瀏覽器和Safari，但不是在Firefox中工作。有人能告訴我問題可能是什麼嗎？我想這可能是一個JS問題。

這裏是一個工作頁面的鏈接：http://tinyurl.com/calc1test1

下面是HTML：

<h4><span>Area Calculator</span></h4> 
          <div class="boxInfo contactForm"> 

             <div style="display:none"><input type="checkbox"   name="CampaignList_64585" checked="checked" value="on" /></div> 
            <div> 
             <label>Length:</label> 
             <input type=text name="square_length" size="3" onChange="get_cubicyards();"> 
            </div> 
            <div> 
             <label>Width:</label> 
             <input type=text name="square_width" size="3" onChange="get_cubicyards();"> 
            </div> 
            <div> 
             <label>Depth:</label> 
             <input type=text name="square_depth" size="3" onChange="get_cubicyards();"> 
            </div> 

           <div class="calcbutton"> 

             <input id="contactSubmit" class="calcsubmit" type="button" value="Get Amounts" onClick="get_cubicyards();"> 
           </div> 

            <div> 
             <label>Cubic Yards:</label> 
             <input type=text name="square_cuyard" onFocus="calculate_totals();this.blur();"> 
            </div> 

這裏是JS：

<script language="Javascript"> 
    function isValidInput(strString) 
    { 
     //String of valid characters 
     var strValidChars = '.'; 
     var strChar; 
     var blnResult = true; 
     var decimalCount = 0; 

     if (strString.length == 0) return false; 

     //Test strString consists of valid characters listed above 
     for (i = 0; i < strString.length && blnResult == true; i++) 
     { strChar = strString.charAt(i); 
      if (strValidChars.indexOf(strChar) == -1) 
      { blnResult = false; } 
      if (strChar == '.') 
      { decimalCount++; } 
     } 

     if (decimalCount > 1) 
     { blnResult = false; } 

     return blnResult; 
    } 

    function get_cubicyards() 
    { var cubicyards; 

       if( (eval('document.all.square_depth.value')) && (!isValidInput(eval('document.all.square_depth.value'))) ) 
       { alert('You must enter only numeric values.'); 
        eval('document.all.square_cuyard.value = \'\''); 
        return false; 
       } 
       if( (eval('document.all.square_length.value')) && (!isValidInput(eval('document.all.square_length.value'))) ) 
       { alert('You must enter only numeric values.');     
        eval('document.all.square_cuyard.value = \'\''); 
        return false; 
       } 
       if( (eval('document.all.square_width.value')) && (!isValidInput(eval('document.all.square_width.value'))) ) 
       { alert('You must enter only numeric values.'); 
        eval('document.all.square_cuyard.value = \'\''); 
        return false; 
       } 

       //Only make calculations if there are valid values specified for ALL necessary fields 
       if ( (eval('document.all.square_depth.value')) && (eval('document.all.square_length.value')) && (eval('document.all.square_width.value')) ) 
       { cubicyards = (eval('(document.all.square_depth.value * document.all.square_length.value * document.all.square_width.value)/324')*1000)/1000; 
        eval('document.all.square_cuyard.value = '+cubicyards); 
        return true; 
       } 


    } 
</script> 

Answer 1

您正在使用的document.all這是不在w3c標準中。你可以使用W3C標準添加一個ID，輸入字段，然後得到他們的價值觀：

document.getElementById('[id name here]') 

Answer 2

if((eval('document.all.square_depth.value')) && (!isValidInput(eval('document.all.square_depth.value'))))

簡單的回答是，Firefox不支持document.all。

但是，嗯，長的答案是這段代碼不完整。您可能要插入form標籤，這樣就可以做到跨瀏覽器的代碼一樣......

<form name='myForm'> 
    <h4>Area Calculator</h4> 
    <div class="boxInfo contactForm"> 
     <div style="display:none"><input type="checkbox" name="CampaignList_64585" checked="checked" value="on" /></div> 
     <div> 
      <label>Length:</label> 
      <input type="text" name="square_length" size="3" onchange="get_cubicyards();"> 
     </div> 
     <div> 
      <label>Width:</label> 
      <input type="text" name="square_width" size="3" onchange="get_cubicyards();"> 
     </div> 
     <div> 
      <label>Depth:</label> 
      <input type="text" name="square_depth" size="3" onchange="get_cubicyards();"> 
     </div> 
     <div class="calcbutton"> 
      <input id="contactSubmit" class="calcsubmit" type="button" value="Get Amounts" onclick="get_cubicyards();"> 
     </div> 

     <div> 
      <label>Cubic Yards:</label> 
      <input type="text" name="square_cuyard" onfocus="calculate_totals();this.blur();"> 
     </div> 
    </div> 
</form> 

...

function get_cubicyards() { 
    var cubicyards, 
     myForm = document.forms['myForm']; 

    if (isNaN(myForm.elements['square_length'].value)) { 
     alert('You must enter only numeric values.'); 
    } else { 
     // ... more checks and logic     
    } 
} 

老實說，與跨瀏覽聯合國 - 友好代碼，這個奇怪的eval使用其他人指出，沒有isNaN，潛在div矯枉過正，嵌套在h4等級中的免費span，你可能會真正受益於減速並遵循一些介紹性教程（this one不是很好，但是是一個開始），然後再問太多問題。

我們都從某個地方開始！祝你好運。

Answer 3

火狐控制檯顯示此錯誤：

[10:26:13.365] TypeError: document.all is undefined @ http://kynock.wildwingdesign.com/calctest:72 

在Firefox中不能使用document.all。這裏真正的問題是你的javascript真的很糟糕。這裏應該不需要eval()，現在應該需要document.all。簡單地給每個輸入一個id值並使用documentGetElementById('yourId').value來獲取存儲在輸入中的值。