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

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>

Answer 2

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

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

最后，假设两个选项都被选中，您可能只想输出总数。 我在以下示例中使用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>

希望这可以帮助！ :)