Question

问题：

未选择单选按钮时的警告框，它无法正常工作。
点击提交按钮后，费用为＆＃39;在警报框中说NaN，我不想要。

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

＆＃13;

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);

}

＆＃13;

<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>

＆＃13;

Answer 1

这是一个没有修改HTML的解决方案，不需要循环。

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

＆＃13;

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.');
  }
}

＆＃13;

<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>

＆＃13;

Answer 2

问题在于，您选择宠物的警报是在您的循环中检查单选按钮检查。如果我选择dog，当它在cat上循环时，它的计算结果为false。不要在else if循环中运行for，只需检查循环结束后是否设置pet和colour（默认情况下不设置它们）

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

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

＆＃13;

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);
  }
}

＆＃13;

<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>

＆＃13;

希望这有帮助！：）

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

2 个答案: