Some comments
function calculateCost() {
var radioButton; // A radio button
var cost = 0; // Cost of the selection
/* i starts at 1, then on every next iteration, it will be one higher
* up to maximum 9 (included)
* This is a problem below! Whenever i is 7 or higher ("flight7", "flight8", "flight9")
* getElementById will return null since there is no such element.
* The same goes for "seating" concatenated with 4 and higher.
* Yet, later on you try to use radioButton.checked, which when radioButton is null
* will turn into null.checked which leads to an error. (But this one won't show until
* you've fixed some other things).
*/
for (var i = 1; i <=9; i++)
{
/* Get elements with id flight1, flight2, etc
* Assign such elements to radioButton
*/
radioButton = document.getElementById("flight" + i);
/* Get elements with id searing1, seating2, etc
* Assign such an elements to radioButton
* DO NOTICE: radioButton is the same as radioButton above
*/
radioButton = document.getElementById("seating" + i);
/* What was the purpose of retrieving the first element if it is never used?
* Perhaps it should actually be used instead of just discarded?
*/
/* If either one of the seating1, seating2 and seating 3 elements is checked
* then whenever radioButton represents that element, the following is exeuted
*/
if (radioButton.checked == true)
{
/* Which leads us to a variable called "flight", which has never been
* defined to be anything at all, hence the "reference error" message.
* Just because you call a variable something which in english reminds you
* of an item or value, doesn't mean it will represent that item or value.
* You have to actually MAKE it represent that item or value.
* Perhaps you somehow ment to use "flight" and "seating" rather than
* "radioButton" above?
*/
cost += parseInt(flight.value) * parseInt(seating.value);
}
}
// Display the total cost of the selected excursions
alert("The totalcost of flight is $" + cost);
}
Oh, before I forget again, the <input type="submit" was another issue with your first posted code. That will send a request to the server, which means that the javascript code will not have time to execute before the document it belongs to no longer exists. Various ways to change that: one is to make it a button type instead.
A few suggestions
<script>
/* To use this function, you will need to restrict radio inputs to one group per containing
element. i.e., this is NOT ok
<p id="containing element">
<input type="radio" name="group1">
<input type="radio" name="group1">
<input type="radio" name="group2">
<input type="radio" name="group2">
</p>
since that structure could mean there are more than one selected radio button inside the
group, and the code below won't be able to handle that.
*/
function getSelectedRadioInGroup(id)
{
var group = document.getElementById(id);
// Make sure an element with the supplied id was found
if (group)
{
// Get all input elements inside that element
var els = group.getElementsByTagName('input');
for (var i = 0; i < els.length; ++i)
{
// If you find an input of type radio which is checked, return that input
if (els[i].type=="radio" && els[i].checked)
return els[i];
}
}
return false;
}
function calculateCost()
{
var errors = Array();
// Get checked radio button in the flight group
var flight = getSelectedRadioInGroup('flights');
if (flight == false)
{
errors[errors.length] = 'You must select a flight';
}
// Get checked radio button in the seating group
var seating = getSelectedRadioInGroup('seatings');
if (seating == false)
{
errors[errors.length] = 'You must select a seating';
}
// Show error messages and return if there was an error
if (errors.length)
{
alert(errors.join("\n"));
return;
}
var cost = parseInt(flight.value) + parseInt(seating.value);
alert('Cost is: ' + cost);
}
</script>
<h1>Gotham Airlines Fare Calculator</h1>
<form>
<p>Complete the form below to calculate the cost of your flight.</p>
<p id="flights">
<input type="radio" id="flight1" name="flights" value="230"> <label for="flight1">Gotham - Hill Valley</label><br>
<input type="radio" id="flight2" name="flights" value="250"> <label for="flight2">Gotham - Las Venturas</label><br>
<input type="radio" id="flight3" name="flights" value="190"> <label for="flight3">Gotham - Storybrooke</label><br>
<input type="radio" id="flight4" name="flights" value="160"> <label for="flight4">Gotham - Marlishire</label><br>
<input type="radio" id="flight5" name="flights" value="270"> <label for="flight5">Gotham - Lillian</label><br>
<input type="radio" id="flight6" name="flights" value="220"> <label for="flight6">Gotham - Seahaven</label>
</p>
<p>Click here if you will be burchasing a return fare: <input type="checkbox" value="2"></p>
<p id ="seatings">Seating:<br>
<input type="radio" id="seating1" name="seating" value="1.5"> <label for="seating1">First Class</label><br>
<input type="radio" id="seating2" name="seating" value="2"> <label for="seating2">Business Class</label><br>
<input type="radio" id="seating3" name="seating" value="1"> <label for="seating3">Economy Class</label>
</p>
<p><input type="button" value="Submit" onclick="calculateCost();"> <input type="reset"></p>
</form>
And finally note that in the above example, I was still using parseInt() for the radio button values, but one of them has the value "1.5" which is not an integer, but a float (hint: parseFloat)
