The problems:
function calculateCost() {
var radioButton;
var pet;
var colour;
var cost = 0;
var selectedPet = ["Cat", "Dog", "Rabbit"];
var selectedColour = ["Black", "Gold", "White"];
for (var i = 1; i <= 3; i++) {
radioButton = document.getElementById(selectedPet[i - 1]);
if (radioButton.checked == true) {
pet = selectedPet[i - 1];
cost += parseInt(radioButton.value);
//alert(parseInt(radioButton.value));
} else if (document.getElementById(selectedPet[i]).null);
alert("You did not select a pet")
}
for (var i = 1; i <= 3; i++) {
radioButton = document.getElementById(selectedColour[i - 1]);
if (radioButton.checked == true) {
colour = selectedColour[i - 1];
cost += parseInt(radioButton.value);
//alert(parseInt(radioButton.value));
} else if (document.getElementById(selectedColour[i]).null);
alert("You did not select a colour")
}
cost = selectedPet.value * selectedColour.value;
alert("You have selected a " + pet + " and the colour selected was " + colour + ", the total cost is $" + cost);
}
<h1> Adopt a pet </h1>
<form>
<p>Choose a type of pet:
<br>
<input type="radio" id="Cat" name="pet" value="200"><label for="cat">Cat</label>
<br>
<input type="radio" id="Dog" name="pet" value="200"><label for="dog">Dog</label>
<br>
<input type="radio" id="Rabbit" name="pet" value="20"><label for="rabbit">Rabbit</label>
<br>
</p>
<p>Choose the colour of pet:
<br>
<input type="radio" id="Black" name="colour" value="80"><label for="black">Black</label>
<br>
<input type="radio" id="Gold" name="colour" value="100"><label for="gold">Gold</label>
<br>
<input type="radio" id="White" name="colour" value="90"><label for="white">White</label>
<br>
</p>
<p><input type="button" value="Submit" onClick="calculateCost();">
</form>
The problem is that your alert for not selecting a pet is inside of your loop that checks the radio button checks. If I select dog
, when it loops over cat
, it evaluates to false. Instead of running the else if
inside your for
loop, simply check whether pet
and colour
are set after the loop has ended (they're not set by default).
As for your cost returning NaN
, that was because you were trying to grab the value of the array, rather than the element. It would actually make more sense to treat these as separate values, so I've created two new variables to handle this - selectedPetCost
and selectedColourCost
.
Finally, you'll probably only want to output the total assuming both options are selected. I've done this with if (pet && colour)
in my following example:
function calculateCost() {
var radioButton;
var pet;
var colour;
var cost = 0;
var selectedPet = ["Cat", "Dog", "Rabbit"];
var selectedColour = ["Black", "Gold", "White"];
var selectedPetCost;
var selectedColourCost;
for (var i = 1; i <= 3; i++) {
radioButton = document.getElementById(selectedPet[i - 1]);
if (radioButton.checked) {
pet = selectedPet[i - 1];
selectedPetCost = parseInt(radioButton.value);
//alert(parseInt(radioButton.value));
}
}
if (!pet) {
alert('No pet selected!');
}
for (var i = 1; i <= 3; i++) {
radioButton = document.getElementById(selectedColour[i - 1]);
if (radioButton.checked == true) {
colour = selectedColour[i - 1];
selectedColourCost = parseInt(radioButton.value);
//alert(parseInt(radioButton.value));
}
}
if (!colour) {
alert('No colour selected!');
}
if (pet && colour) {
cost = selectedPetCost * selectedColourCost;
alert("You have selected a " + pet + " and the colour selected was " + colour + ", the total cost is $" + cost);
}
}
<h1> Adopt a pet </h1>
<form>
<p>Choose a type of pet:
<br>
<input type="radio" id="Cat" name="pet" value="200"><label for="cat">Cat</label>
<br>
<input type="radio" id="Dog" name="pet" value="200"><label for="dog">Dog</label>
<br>
<input type="radio" id="Rabbit" name="pet" value="20"><label for="rabbit">Rabbit</label>
<br>
</p>
<p>Choose the colour of pet:
<br>
<input type="radio" id="Black" name="colour" value="80"><label for="black">Black</label>
<br>
<input type="radio" id="Gold" name="colour" value="100"><label for="gold">Gold</label>
<br>
<input type="radio" id="White" name="colour" value="90"><label for="white">White</label>
<br>
</p>
<p><input type="button" value="Submit" onClick="calculateCost();">
</form>
Hope this helps! :)