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

Question

问题：

未选中单选按钮时的警告框无法正常工作。
点击提交按钮后，警告框中的 'cost' 显示 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>

Answer 2

问题是，您关于未 select 养宠物的警告在检查单选按钮检查的循环内部中。如果我 select dog，当它遍历 cat 时，它的计算结果为 false。而不是运行 for 循环中的 else if，只需检查 pet 和 colour 是否在循环结束后设置（它们不是由默认）。

至于您的返回成本 NaN，那是因为您试图获取数组的值，而不是元素。将它们视为单独的值实际上更有意义，因此我创建了两个新变量来处理这个问题 - selectedPetCost 和 selectedColourCost.

最后，假设两个选项都已 selected，您可能只想输出总数。我在以下示例中使用 if (pet && colour) 完成了此操作：

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>

希望对您有所帮助！ :)

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

How to fix alert if no radio button is selected?

html

javascript

alert

calculator

radio-button