You asked for it so here is my beast. This produces the text i want for the first two functions (which just provides the costs) but i can't figure out how to get my last function to calculate the total based off of the pass and tax selected.
Is it possible to have all of this in just one function? Am i approaching this completely wrong?
<html>
<script>
function callMyFunction() {
var passType = document.getElementById('pass').value;
var cost;
var text;
if (passType == "morning"){
cost = 20.00
text = 'Morning pricing is valid until noon and cost 20 dollars each...early bird gets the fresh powder!'
}
else if (passType == "afternoon"){
cost = 25.00
text = 'Afternoon pricing is valid from 12pm to 6pm and cost 25 dollars each'
}
else if (passType == "evening"){
cost = 15.00
text = 'Evening pricing is valid from 6pm until it is no longer safe and cost 15 dollars each'
}
document.getElementById("price").innerHTML=text;
}
function callMyNextFunction() {
var tax = document.getElementById('tax').value;
var taxText;
if (tax=="CA_Resident"){
taxText='Residency Tax adds 6 percent'
}
else {
taxText='Non Residency Tax adds 8 percent'
}
document.getElementById("taxPrice").innerHTML=taxText;
}
function whatIsMyTotal () {
var total = document.getElementById('pass','tax').value;
var totalText;
if (pass=="morning",tax="CA_Resident"){
totalText = 20.00 + 20.00 * .06
}
else if(pass=="afternoon", tax="CA_Resident"){
totalText = 0.00
}
document.getElementById("totalPrice").innerHTML=totalText;
}
</script>
<h2><strong>The Amazing Skiatorium Ski Pass Pricing</strong></h2>
<form>
<fieldset>
<p>Please select one of our fabulous options for more information on the pricing</p>
<legend>
Ski Pass Options
</legend>
<select id="pass" onchange="callMyFunction();">
<option value="morning" selected="selected">Morning</option>
<option value="afternoon">Afternoon</option>
<option value="evening">Evening</option>
</select>
<p id="price"></p>
</fieldset>
<br>
<fieldset>
<legend>
Sales tax
</legend>
<select id="tax" onchange="callMyNextFunction();">
<option value="CA_Resident" selected="selected">CA Resident</option>
<option value="Non_Resident">Non Resident</option>
</select>
<p id="taxPrice"></p>
</fieldset>
<br>
<fieldset>
<legend>
Grand Spankin Total
</legend>
<p>After making your selections above, press the What'sMyTotal? button for total pricing</p>
<input type="button" value="calculate" onclick="whatIsMyTotal();" >
<p id="totalPrice"></p>
</fieldset>
</form>
</html>