javascript - 如果没有选择单选按钮，如何修复警报？

Question

问题:

1. 未选中单选按钮时的警告框无法正常工作。
2. 点击提交按钮后，警告框中的“成本”显示为 NaN，这是我不想要的。

并尽量保留下面提供的 HTML 代码。

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

这是一个无需修改 HTML 且无需循环的解决方案。

代码应该是不言自明的。如果您需要任何帮助，请告诉我!

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>