cant seem to figure out how to combine the two scripts in order to run the calculator

StackOverflow https://stackoverflow.com/questions/23137733

Question

I am trying to take the model of a mini cooper and combine the features. So a user can customize their ride and receive total cost of their selections displaying it to the user. Here is my code below:

<!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>
Was it helpful?

Solution

I've broken it up into 3 seperate functions, one that calculates the total cost, one that gets the base cost and one that gets the costs of all the addons.

How it works. When you select a base model, and you addons, and hit the calculate button, it triggers the calculate_total_cost() function, which then runs the two other functions to get the data required to do the calculations.

It then loops through all the addons, add them together and then displays the base cost plus the total addon cost.

Check the demo and let me know if this is what you expected.

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;
    }
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top