How to fix alert if no radio button is selected?

Question

The problems:

1. Alert box when a radio button is not selected, it does not work properly.
2. After clicking on submit button, the 'cost' in the alert box says NaN, which I don't want.

And try to keep the HTML code as provided below as much as possible.

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>

Answer 1

Here's a solution with no modifications to your HTML and no loops needed.

The code should be pretty self-explanatory. Let me know if you need any help!

function calculateCost() {
  var pet = document.querySelector('input[name="pet"]:checked');
  var colour = document.querySelector('input[name="colour"]:checked');

  if (pet && colour) {
    alert("You have selected a " + pet.id + " and the colour selected was " +
      colour.id + ", the total cost is $" + pet.value * colour.value + ".");

  } else if (!pet && colour) {
    alert('You did not select a pet.');

  } else if (pet && !colour) {
    alert('You did not select a colour.');

  } else {
    alert('You did not select a pet or colour.');
  }
}

<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>
  <input type="button" value="Submit" onClick="calculateCost();">
</form>

Answer 2

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! :)