似乎不知道如何将这两个脚本结合起来运行计算器

我正在尝试采用迷你cooper的模型并结合这些功能。因此，用户可以自定义他们的骑行，并接收他们向用户显示的选择的总成本。下面是我的代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD><TITLE>Mini Cooper Calculator</TITLE>
<META content="text/html; charset=windows-1252" http-equiv=Content-Type>
<SCRIPT type=text/javascript>
    function pic_a_model(){
        var base_cost = "get_model_value ()";
        alert(base_cost);
    function get_model_value(){
        var radio_buttons = document.getElementsByName('model');
        for (var i = 0, length = radio_buttons.length; i < length; i++) {
            if (radio_buttons[i].checked) {
                return radio_buttons[i].value;

            }
        }
    }

</SCRIPT>
<META name=GENERATOR content="MSHTML 8.00.7601.18129"></HEAD>
<BODY>
<FORM id=mini_cooper_calculation_form method=post action=#>
<H2>MINI Cooper Calculator</H2>
<P><STRONG>Pick a Model:</STRONG><BR><BR><INPUT id=hardtop value=20200 type=radio 
name=model> <LABEL for=hardtop>Hardtop</LABEL>
<BR><INPUT id=clubman value=21900 type=radio name=model> <LABEL for=clubman>Clubman</LABEL> 
<BR><INPUT id=convertable value=25650 type=radio name=model> <LABEL for=convertable>Convertible</LABEL> </P>

<STRONG>Options:</STRONG><BR><BR><INPUT id=paint_upgrade value=500 type=checkbox name=paint_upgrade> <LABEL for=paint_upgrade>Paint Upgrade</LABEL> 
<BR><INPUT id=chrome_mirrors value=100 type=checkbox name=chrome_mirrors> <LABEL for=chrome_mirrors>Chrome Mirrors</LABEL> 
<BR><INPUT id=heated_seats value=250 type=checkbox name=heated_seats> <LABEL for=heated_seats>Heated Seats</LABEL> 
<BR><INPUT id=leather_seats value=1000 type=checkbox name=leather_seats> <LABEL for=leather_seats>Leather Seats</LABEL> 
<BR><INPUT id=cold_weather_package value=750 type=checkbox name=cold_weather_package> <LABEL for=cold_weather_package>Cold Weather Package</LABEL>
<BR><INPUT id=technology_package value=2000 type=checkbox name=technology_package> <LABEL for=technology_package>Technology Package</LABEL> 
<BR><INPUT id=automatic_transmission value=1250 type=checkbox name=automatic_transmission> <LABEL for=automatic_transmission>Automatic Transmission</LABEL> </P>
<P><STRONG>Tax Rate:</STRONG> &nbsp; <INPUT style="TEXT-ALIGN: right" 
id=tax_rate maxLength=5 size=3 type=text name=tax_rate>% </P>
<P><STRONG>Total (Including Tax): </STRONG><SPAN id=total_cost></SPAN></P>
<P><INPUT onclick=calculate_total_cost() value=" CALCULATE " type=button></P></FORM></BODY></HTML>

我将其分解为3个独立的函数，一个计算总成本，一个获得基本成本，另一个获得所有插件的成本。

它是如何工作的。当您选择一个基本模型，添加并点击计算按钮时，它会触发calculate_total_cost()函数，然后运行另外两个函数来获得进行计算所需的数据。

然后，它循环遍历所有插件，将它们相加，然后显示基本成本加上总插件成本。

查看演示，让我知道这是否是你所期望的。

工作演示

   //Function that calculates the final cost ( I have not taken into consideration TAX ) 
   function calculate_total_cost() {
        var base_cost = get_model_value(),
            addons = getSelectedChbox(),
            addonTotal = 0;
        for (var i = 0; i < addons.length; i++) {
            addonTotal += addons[i] + addonTotal;
        }
        document.getElementById('total_cost').innerHTML = base_cost + addonTotal;
    }
    //This function gets the base cost of the vehicle
    function get_model_value() {
        var cost = document.getElementsByName('model')[0].value;
        return parseInt(cost);
    }
    //This here goes through all the checkboxes and pushes the values in to an array and returns it.
    function getSelectedChbox() {
        var selchbox = [],
            inpfields = mini_cooper_calculation_form.getElementsByTagName('input'),
            nr_inpfields = inpfields.length;
        for (var i = 0; i < nr_inpfields; i++) {
            if (inpfields[i].type == 'checkbox' && inpfields[i].checked == true) selchbox.push(parseInt(inpfields[i].value));
        }
        return selchbox;
    }

相关内容

最新更新

热门标签：