Please help fix alert if no radio button is selected

Question

The problems:

Alert box when a radio button is not selected, it does not work properly.

After clicking on submit button, the 'cost' in the alert box says NaN, which I don't want.

And try to keep the html codes as provided below as much as possible.

Thanks in advance!

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>

Recommended for you: Get network issues from WhatsUp Gold. Not end users.

Answer 1

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

Please help fix alert if no radio button is selected

Sign up