Question

我正在尝试使用迷你库珀的模型并结合这些功能。因此，用户可以定制他们的骑行并且接收他们的选择的总成本，将其显示给用户。以下是我的代码：

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

Answer 1

我把它分成了3个独立的功能，一个用于计算总成本，一个用于获得基本成本，另一个用于获取所有插件的成本。

工作原理。当您选择基本模型和插件，并点击计算按钮时，它会触发calculate_total_cost()函数，然后运行另外两个函数来获取进行计算所需的数据。

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

检查演示并告诉我这是否符合您的预期。

Working demo

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

似乎无法弄清楚如何组合这两个脚本以运行计算器

1 个答案: