Javascript计算器在firefox中不工作

Javascript calculator not working in firefox

本文关键字：工作 firefox 计算器 Javascript      更新时间：2023-09-26

我有一个简单的面积计算器为园林绿化公司，它只在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>

您正在使用文档。所有这些都不在w3c标准中。您可以为输入字段添加一个id，然后使用w3c标准获取它们的值:

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

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

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

老实说，有了跨浏览器un友好的代码，这个奇怪的eval用法，没有isNaN，潜在的div过度使用，在h4中嵌套了一个不必要的span，等等，在问太多问题之前，你可能会真正受益于放慢速度并遵循一些入门教程(这个不是很好，但是个开始)。

我们都是从某处开始的!好运。

相关文章：