实时报价计算器Javascript

时间:2012-10-22 16:42:16

标签: javascript calculator quote

我的价格报价计算器出现问题,它只是不起作用,我在上传之前尝试研究原因并更改代码并重新启动。

我的问题 任何人都可以在我的代码中找到错误来使其工作吗?

使用Javascript:

                var theQuoteForm = document.forms["quoteForm"];

            var additionalLogo= new Array();
            additionalLogo["graphicNone"]=0;
            additionalLogo["graphicOne"]=10;
            additionalLogo["graphicTwo"]=20;
            additionalLogo["graphicThree"]=30;
            additionalLogo["graphicFour"]=40;
            additionalLogo["graphicFive"]=50;
            additionalLogo["graphicSix"]=60;
            additionalLogo["graphicSeven"]=70;
            additionalLogo["graphicEight"]=80;
            additionalLogo["graphicNine"]=90;
            additionalLogo["graphicTen"]=100;

            var additionalEmail= new Array();
            additionalEmail["webNone"]=0;
            additionalEmail["webOne"]=10;
            additionalEmail["webTwo"]=20;
            additionalEmail["webThree"]=30;
            additionalEmail["webFour"]=40;
            additionalEmail["webFive"]=50;
            additionalEmail["webSix"]=60;
            additionalEmail["webSeven"]=70;
            additionalEmail["webEight"]=80;
            additionalEmail["webNine"]=90;
            additionalEmail["webTen"]=100;

            function getGraphicBasePrice()
            {
                var graphicBasePrice=0;
                var theQuoteForm = document.forms["quoteForm"];
                var graphics = theQuoteForm.elements["graphics"];

                if(graphics.checked==true)
                {
                    graphicBasePrice=100;
                }
                else if(graphics.checked==false)
                {
                    graphicBasePrice=0;
                }

                return graphicBasePrice;
            }

            function sLogosPrice()
            {
                var sLogoPrice=0;
                var theQuoteForm = document.forms["quoteForm"];
                var smallLogo = theQuoteForm.elements["sLogo"];

                if(smallLogo.checked==true)
                {
                    sLogoPrice=20;
                }
                else if(smallLogo.checked==false)
                {
                    sLogoPrice=0;
                }

                return sLogoPrice;
            }

            function mLogosPrice()
            {
                var mLogoPrice=0;
                var theQuoteForm = document.forms["quoteForm"];
                var mediumLogo = theQuoteForm.elements["mLogo"];

                if(mediumLogo.checked==true)
                {
                    mLogoPrice=40;
                }
            else if(mediumLogo.checked==false)
                {
                    mLogoPrice=0;
                }

                return mLogoPrice;
            }

            function lLogosPrice()
            {
                var lLogoPrice=0;
                var theQuoteForm = document.forms["quoteForm"];
                var largeLogo = theQuoteForm.elements["lLogo"];

                if(largeLogo.checked==true)
                {
                    lLogoPrice=60;
                }
                else if(largeLogo.checked==false)
                {
                    lLogoPrice=0;
                }

                return lLogoPrice;
            }

            function getAdditionalLogoPrice()
            {
                var additionalLogoPrice=0;
                var theQuoteForm = document.forms["quoteForm"];
                var selectedAdditionalLogo = theQuoteForm.elements["additLogo"];

                additionalLogoPrice = additionalLogo[selectedAdditionalLogo.value];

                return additionalLogoPrice;
            }

            function postersPrice()
            {
                var posterPrice=0;
                var theQuoteForm = document.forms["quoteForm"];
                var Poster = theQuoteForm.elements["poster"];

                if(Poster.checked==true)
                {
                    posterPrice=60;
                }

                return posterPrice;
            }

            function illustrativesPrice()
            {
                var illustrativePrice=0;
                var theQuoteForm = document.forms["quoteForm"];
                var Illustrative = theQuoteForm.elements["illustrative"];

                if(Illustrative.checked==true)
                {
                    illustrativePrice=60;
                }

                return illustrativePrice;
            }

            function getWebBasePrice()
                            {
                var webBasePrice=0;
                var theQuoteForm = document.forms["quoteForm"];
                var web = theQuoteForm.elements["web"];

                if(web.checked==true)
                {
                    webBasePrice=150;
                }

                return webBasePrice;
            }

            function designsPrice()
                            {
                var designPrice=0;
                var theQuoteForm = document.forms["quoteForm"];
                var Design = theQuoteForm.elements["design"];

                if(Design.checked==true)
                {
                    designPrice=60;
                }

                return designPrice;
            }

            function developsPrice()
            {
                var developPrice=0;
                var theQuoteForm = document.forms["quoteForm"];
                var Develop =               theQuoteForm.elements["develop"];

                if(Develop.checked==true)
                {
                    developPrice=60;
                }

                return developPrice;
            }

            function seosPrice()
            {
                var seoPrice=0;
                var theQuoteForm = document.forms["quoteForm"];
                var Seo = theQuoteForm.elements["seo"];

                if(Seo.checked==true)
                {
                    seoPrice=60;
                }

                return seoPrice;
            }

            function cmssPrice()
            {
                var cmsPrice=0;
                var theQuoteForm = document.forms["quoteForm"];
                var Cms = theQuoteForm.elements["cms"];

                if(Cms.checked==true)
                                {
                            cmsPrice=60;
                }

                return cmsPrice;
            }

                            function hostingsPrice()
                            {
                var hostingPrice=0;
                var theQuoteForm = document.forms["quoteForm"];
                var Hosting = theQuoteForm.elements["hosting"];

                if(Hosting.checked==true)
                {
                    hostingPrice=60;
                }

                return hostingPrice;
            }

            function emailsPrice()
            {
                var emailPrice=0;
                var theQuoteForm = document.forms["quoteForm"];
                var emailAccount =              theQuoteForm.elements["emailAccount"];

                if(emailAccount.checked==true)
                {
                    emailPrice=60;
                }

                return emailPrice;
            }

            function getAdditionalEmailPrice()
            {
                var additionalEmailPrice=0;
                var theQuoteForm = document.forms["quoteForm"];
                var selectedAdditionalEmail =               theQuoteForm.elements["additEmail"];

                additionalEmailPrice =              additionalEmail[selectedAdditionalEmail.value];

                return additionalEmailPrice;
            }

            function maintenancesPrice()
            {
                var maintenancePrice=0;
                var theQuoteForm = document.forms["quoteForm"];
                var maintenance =               theQuoteForm.elements["maintenance"];

                if(maintenance.checked==true)
                {
                    maintenancePrice=60;
                }

                return maintenancePrice;
            }

            function calculateTotal()
            {
                var quoteFormPrice = getGraphicBasePrice() +                sLogosPrice() + mLogosPrice() + lLogosPrice() + getAdditionalLogoPrice() + postersPrice() + illustrativesPrice() + getWebBasePrice() + designsPrice() + developsPrice() + seosPrice() + cmssPrice() + hostingsPrice() + emailsPrice() + getAdditionalEmailPrice() + maintenancesPrice();

                var calculateObject = document.getElementById('totalPrice');
                calculateObject.innerHTML = "<b>Total Quote Price:</b> &pound;"+quoteFormPrice;
            }

HTML:

    <script type="text/javascript" src="external/scripts/quoteCalculator.js"></script>


            <form action="" id="quoteForm" onsubmit="return false;" style="width: 630px; margin-top: 40px; margin-left: 20px; background-color: #fff; color: #000;">
                <fieldset style="width: 600px;">
                    <label for="graphics" class="graphicsLbl">Graphics</label>
                        <input id="graphics" class="checkBox" name="graphics" type="checkbox" onclick="calculateTotal()" tabindex=1><br /><br />

                    <label for="sLogo" class="Lbl">Small Logo (150px to 225px)</label>
                        <input id="sLogo" class="checkBox" name="sLogo" type="checkbox" onclick="calculateTotal()" tabindex=2><br /><br />

                    <label for="mLogo" class="Lbl">Medium Logo (226px to 360px)</label>
                        <input id="mLogo" class="checkBox" name="mLogo" type="checkbox" onclick="calculateTotal()" tabindex=3><br /><br />

                    <label for="lLogo" class="Lbl">Large Logo (361px+)</label>
                        <input id="lLogo" class="checkBox" name="lLogo" type="checkbox" onclick="calculateTotal()" tabindex=4><br /><br />

                    <label for="aLogo" class="additLogoLbl">Would you like additional logos?</label>
                        <input id="aLogo" class="checkBox" name="aLogo" type="checkbox" onclick="calculateTotal()" tabindex=5><br /><br />

                    <label for="additLogo" class="additLogoLbl">Choose amount of additional logos you would like:</label>
                        <select name="additLogo" id="additLogo" style="width: 100%; border: 1px solid #000" onchange="calculateTotal()" tabindex=6>
                            <option value="graphicNone">0</option>
                            <option value="graphicOne">1</option>
                            <option value="graphicTwo">2</option>
                            <option value="graphicThree">3</option>
                            <option value="graphicFour">4</option>
                            <option value="graphicFive">5</option>
                            <option value="graphicSix">6</option>
                            <option value="graphicSeven">7</option>
                            <option value="graphicEight">8</option>
                            <option value="graphicNine">9</option>
                            <option value="graphicTen">10</option>
                        </select><br /><br />

                    <label for="poster" class="Lbl">Poster</label>
                        <input id="poster" class="checkBox" name="poster" type="checkbox" onclick="calculateTotal()" tabindex=7><br /><br />

                    <label for="illustrative" class="Lbl">Illustrative</label>
                        <input id="illustrative" class="checkBox" name="illustrative" type="checkbox" onclick="calculateTotal()" tabindex=8><br /><br />

                    <label for="web" class="webLbl">Web</label>
                        <input id="web" class="checkBox" name="web" type="checkbox" onclick="calculateTotal()" tabindex=9><br /><br />

                    <label for="design" class="Lbl">Just design the look (Design)</label>
                        <input id="design" class="checkBox" name="design" type="checkbox" onclick="calculateTotal()" tabindex=10><br /><br />

                    <label for="develop" class="Lbl">We have a design to implement (Develop)</label>
                        <input id="develop" class="checkBox" name="develop" type="checkbox" onclick="calculateTotal()" tabindex=11><br /><br />

                    <label for="seo" class="Lbl">Search Engine Optimization (SEO)</label>
                        <input id="seo" class="checkBox" name="seo" type="checkbox" onclick="calculateTotal()" tabindex=12><br /><br />

                    <label for="cms" class="Lbl">Content Management Systems (CMS)</label>
                        <input id="cms" class="checkBox" name="cms" type="checkbox" onclick="calculateTotal()" tabindex=13><br /><br />

                    <label for="hosting" class="Lbl">We want the/a Website hosted (Hosting)</label>
                        <input id="hosting" class="checkBox" name="hosting" type="checkbox" onclick="calculateTotal()" tabindex=14><br /><br />

                    <label for="emailAccount" class="emailAccountLbl">Email Account Creation (Only with hosting)</label>
                        <input id="emailAccount" class="checkBox" name="emailAccount" type="checkbox" onclick="calculateTotal()" tabindex=15><br /><br />

                    <label for="aEmail" class="aEmailLbl">Would you like additional email accounts?</label>
                        <input id="aEmail" class="checkBox" name="aEmail" type="checkbox" onclick="calculateTotal()" tabindex=16><br /><br />

                    <label for="additEmailAccount" class="additEmailAccountLbl">Choose amount of additional email accounts you would like</label>
                        <select name="additEmailAccount" id="additEmailAccount" style="width: 100%; border: 1px solid #000" onchange="calculateTotal()" tabindex=17>
                            <option value="webNone">0</option>
                            <option value="webOne">1</option>
                            <option value="webTwo">2</option>
                            <option value="webThree">3</option>
                            <option value="webFour">4</option>
                            <option value="webFive">5</option>
                            <option value="webSix">6</option>
                            <option value="webSeven">7</option>
                            <option value="webEight">8</option>
                            <option value="webNine">9</option>
                            <option value="webTen">10</option>
                        </select><br /><br />

                    <label for="maintenance" class="Lbl">We would like you to maintain our Website (On-Going Maintenance)</label>
                        <input id="maintenance" class="checkBox" name="maintenance" type="checkbox" onclick="calculateTotal()" tabindex=18><br /><br />

<script type="text/javascript" src="external/scripts/quoteCalculator.js"></script> <form action="" id="quoteForm" onsubmit="return false;" style="width: 630px; margin-top: 40px; margin-left: 20px; background-color: #fff; color: #000;"> <fieldset style="width: 600px;"> <label for="graphics" class="graphicsLbl">Graphics</label> <input id="graphics" class="checkBox" name="graphics" type="checkbox" onclick="calculateTotal()" tabindex=1><br /><br /> <label for="sLogo" class="Lbl">Small Logo (150px to 225px)</label> <input id="sLogo" class="checkBox" name="sLogo" type="checkbox" onclick="calculateTotal()" tabindex=2><br /><br /> <label for="mLogo" class="Lbl">Medium Logo (226px to 360px)</label> <input id="mLogo" class="checkBox" name="mLogo" type="checkbox" onclick="calculateTotal()" tabindex=3><br /><br /> <label for="lLogo" class="Lbl">Large Logo (361px+)</label> <input id="lLogo" class="checkBox" name="lLogo" type="checkbox" onclick="calculateTotal()" tabindex=4><br /><br /> <label for="aLogo" class="additLogoLbl">Would you like additional logos?</label> <input id="aLogo" class="checkBox" name="aLogo" type="checkbox" onclick="calculateTotal()" tabindex=5><br /><br /> <label for="additLogo" class="additLogoLbl">Choose amount of additional logos you would like:</label> <select name="additLogo" id="additLogo" style="width: 100%; border: 1px solid #000" onchange="calculateTotal()" tabindex=6> <option value="graphicNone">0</option> <option value="graphicOne">1</option> <option value="graphicTwo">2</option> <option value="graphicThree">3</option> <option value="graphicFour">4</option> <option value="graphicFive">5</option> <option value="graphicSix">6</option> <option value="graphicSeven">7</option> <option value="graphicEight">8</option> <option value="graphicNine">9</option> <option value="graphicTen">10</option> </select><br /><br /> <label for="poster" class="Lbl">Poster</label> <input id="poster" class="checkBox" name="poster" type="checkbox" onclick="calculateTotal()" tabindex=7><br /><br /> <label for="illustrative" class="Lbl">Illustrative</label> <input id="illustrative" class="checkBox" name="illustrative" type="checkbox" onclick="calculateTotal()" tabindex=8><br /><br /> <label for="web" class="webLbl">Web</label> <input id="web" class="checkBox" name="web" type="checkbox" onclick="calculateTotal()" tabindex=9><br /><br /> <label for="design" class="Lbl">Just design the look (Design)</label> <input id="design" class="checkBox" name="design" type="checkbox" onclick="calculateTotal()" tabindex=10><br /><br /> <label for="develop" class="Lbl">We have a design to implement (Develop)</label> <input id="develop" class="checkBox" name="develop" type="checkbox" onclick="calculateTotal()" tabindex=11><br /><br /> <label for="seo" class="Lbl">Search Engine Optimization (SEO)</label> <input id="seo" class="checkBox" name="seo" type="checkbox" onclick="calculateTotal()" tabindex=12><br /><br /> <label for="cms" class="Lbl">Content Management Systems (CMS)</label> <input id="cms" class="checkBox" name="cms" type="checkbox" onclick="calculateTotal()" tabindex=13><br /><br /> <label for="hosting" class="Lbl">We want the/a Website hosted (Hosting)</label> <input id="hosting" class="checkBox" name="hosting" type="checkbox" onclick="calculateTotal()" tabindex=14><br /><br /> <label for="emailAccount" class="emailAccountLbl">Email Account Creation (Only with hosting)</label> <input id="emailAccount" class="checkBox" name="emailAccount" type="checkbox" onclick="calculateTotal()" tabindex=15><br /><br /> <label for="aEmail" class="aEmailLbl">Would you like additional email accounts?</label> <input id="aEmail" class="checkBox" name="aEmail" type="checkbox" onclick="calculateTotal()" tabindex=16><br /><br /> <label for="additEmailAccount" class="additEmailAccountLbl">Choose amount of additional email accounts you would like</label> <select name="additEmailAccount" id="additEmailAccount" style="width: 100%; border: 1px solid #000" onchange="calculateTotal()" tabindex=17> <option value="webNone">0</option> <option value="webOne">1</option> <option value="webTwo">2</option> <option value="webThree">3</option> <option value="webFour">4</option> <option value="webFive">5</option> <option value="webSix">6</option> <option value="webSeven">7</option> <option value="webEight">8</option> <option value="webNine">9</option> <option value="webTen">10</option> </select><br /><br /> <label for="maintenance" class="Lbl">We would like you to maintain our Website (On-Going Maintenance)</label> <input id="maintenance" class="checkBox" name="maintenance" type="checkbox" onclick="calculateTotal()" tabindex=18><br /><br />

这一切都进入了这个div:

1 个答案:

答案 0 :(得分:0)

问题出在函数getAdditionalEmailPrice()

标签的名称不正确。

只改变这句话

var emailAccount = theQuoteForm.elements["emailAccount"];

这个

var selectedAdditionalEmail = theQuoteForm.elements["additEmailAccount"];

并且有效。