gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-30 21:06:53 26 4
gpt4 key购买 nike

问题:

  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>

最佳答案

这是一个无需修改 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>

关于javascript - 如果没有选择单选按钮,如何修复警报?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46518761/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com