Question

我有一个简单的区域计算器，适用于景观美化公司，它只适用于chrome，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 = '0123456789.';
        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标准。您可以在输入字段中添加一个id，然后使用w3c标准获取它们的值：

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                
    } 
}

老实说，使用crossbrowser un 友好代码，其他人指出的奇怪的eval用法，没有isNaN，潜在的div矫枉过正，无偿嵌套在span等中的h4，您可能会真正受益于放慢速度并遵循一些入门教程（this one并不是很好，但这是一个开始）问题太多了。

我们都从某个地方开始！祝你好运。

Answer 3

Firefox控制台显示此错误：

[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获取存储在输入中的值。

Javascript计算器不在firefox中工作

3 个答案: