James Li James Li - 3 years ago 158
HTML Question

How to fix alert if no radio button is selected?

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 Source

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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download