I'm new to JavaScripting and would like some help. So Basically, it's a price calculator and I want to know how to add the prices on two separate radio buttons when the 'Calculate' button is clicked. Also, I have a single checkbox and I want to know when that checkbox is clicked it adds up to the total cost of the two checked radio buttons selected. I have not done the checkBox var yet as I do not know how to. I want the total cost to show up in an alert box. Thanks
Here is my code so far
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Singapore Holiday Price Calculator</title>
<script>
function calculateCost() {
var tourButton; // A radio button
var selectedAnswer = 0; //The number of the selected answer
// Get the number of the selected answer (1, 2 or 3)
for (var i = 1; i <= 3; i++) {
tourButton = document.getElementById("tour" + i)
if (tourButton.checked == true) {
selectedAnswer = i;
}
}
//Display the appropriate response
if (selectedAnswer == 1) {
tourButton = 3900
}
else if (selectedAnswer == 2) {
tourButton = 5100
}
else if (selectedAnswer == 3) {
tourButton = 6600
}
else {
alert("Please select a tour type.");
return false;
}
//Finding out the payment date selected
var payment; // Radio Button
var paySelected = 0; // The number of the selected answer
for (var i = 1; i <= 3; i++) {
payment = document.getElementById("pay" + i)
if (payment.checked == true) {
paySelected = i;
}
}
//Display the payment response
if (paySelected == 1) {
payment = 10
}
else if (paySelected == 2) {
payment = 7
}
else if (paySelected == 3) {
payment = 5
}
else {
alert("Please select a payment date.");
return false;
}
// Calculating the discount and total cost of the tour
var discount = tourButton * payment;
var tourCost = tourButton - discount;
var total = tourCost + checkBox;
// Round to the nearest integer
total = Math.round(total);
alert("The approximate cost of the holiday is $" + discount);
}
</script>
</head>
<body>
<form>
<h1>Singapore Holiday Price Calculator</h1>
<p>Complete the form below to calculate the cost of your Singapore holiday. </p>
Tour Type: <br>
<input type="radio" id="tour1" name="tourtype" value="3900"> <label for="tour1">5-day Singapore Escape Tour</label><br>
<input type="radio" id="tour2" name="tourtype" value="5100"> <label for="tour2">7-day Singapore Splendour Tour</label><br>
10-day Best of Singapore Tour
<br>Payment date: <br>
<input type="radio" id="pay1" name="Payment" value="10"> <label for="pay1">Before 1st November 2016</label><br>
<input type="radio" id="pay2" name="Payment" value="7"> <label for="pay2">Between 1st November and 31st December 2016</label><br>
<input type="radio" id="pay3" name="Payment" value="5"> <label for="pay3">After 31st December 2016</label><br>
<p>Click here if you want to include a return airfare from Australia: <input type="checkbox" id="returnFare1" name="fare" value="900"></p>
<p><input type="button" value="Calculate" onClick="calculateCost();"> <input type="reset" value="Reset"></p>
</form>
</body>
</html>
Aucun commentaire:
Enregistrer un commentaire