根据价格计算层数

Question

I want to calculate the layer cost of making a cake based on option from the customer. 1 layer cost 320.00 ( set price for 1 layer already)

Additional layer cost 100

In html i have this:

<select id="layer" name="layer" onchange="updateTotal()" >
<?php   for( $i=1; $i<100; $i++ ) {
        echo "<option value=$i> $i </option>\n"; }
?> 
</select>

In my javascript I have this:

function updateTotal(){ 
var optionPrice = 0; 
function cakeLayerPrice(){
          document.getElementById('layer');
          optionPrice += 100;}
}
cakeLayerPrice();

var totalPrice = optionPrice;
document.getElementById('totalPrice').innerHTML = "$ " + totalPrice;
}

Apparently the amount won't display if I choose even 1 layer, in my function cakeLayerPrice(), what is the right solution?

eg it will display if I choose

1 layer = 320.00

2 layers = 420.00 (+100)

3 layers = 520.00 (+100) and so on.

Answer 1

Each time you're calling updateTotal() you're resetting optionPrice to 0.

Instead you should get from layer select box the layer number and multiply it to 100.

function updateTotal(){ 
    var layers = document.getElementById('layer');
    var totalPrice = parseInst(layers.value, 10) * 100;

    document.getElementById('totalPrice').innerHTML = "$ " + totalPrice;
}

If nothing is selected, or you did't set a default selected, you could get a -1 value. In this case, just update the code to handle the negative values:

function updateTotal(){ 
    var layers = document.getElementById('layer');
    var totalPrice = parseInst(layers.value, 10) * 100;

    if (totalPrice > 0) {
        document.getElementById('totalPrice').innerHTML = "$ " + totalPrice;
    }
}

This example, avoids even the case your price is 0.

If you have this possibility, just change the code as needed.