如果在单击"提交"按钮之后，在"选择您的宠物类型"部分中未选择单选按钮，则应弹出一个警报框，说"您没有选择一种宠物类型"。当未选择"您没有选择颜色"的"无线电"按钮时，颜色也是如此。
谢谢你
整个HTML：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Adopt a pet</title>
<head>
<script>
function calculateCost() {
var radioButton;
var checkbox;
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));
}
//I just guessed this part. This may not be the correct code for this
else if(selectedPet == null) OR (pet == null)
alert("You did not selected 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));
}
// This part I guessed again
else if(selectedColour == null) OR (colour == null)
alert("You did not selected a colour")
}
else
alert("You did not select anything")
}
alert("You have selected a "+pet+" and the colour selected was "+colour+", the total cost is $"+cost);
}
</script>
</head>
<body>
<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>
</body>
</html>您可以使用document.queryselector
直接获得所选收音机您确实需要确保值是数字 - 使用ParseInt或仅+
，您可以忽略表格并使用按钮，因为您没有提交。
function calculateCost() {
var cost = 0;
var selPet = document.querySelector("[name=pet]:checked");
var selColour = document.querySelector("[name=colour]:checked");
var error = [];
if (!selPet) {
error.push("No Pets");
}
if (!selColour) {
error.push("No Colour");
}
if (error.length>0) {
alert(error.join('n')); // show one or two errors with a newline
return; // no need to stay
}
// implicit else
cost = (+selPet.value) + (+selColour.value);
// or
// cost = (+selPet.value) * (+selColour.value);
alert("You have selected a " + selPet.value +
" and the colour selected was " + selColour.value +
", the total cost is $" + cost);
}<h1> Adopt a pet </h1>
<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="Calculate" onclick="calculateCost()" />在这里，我使用提交事件和提交按钮，因为您有表格 - 然后，您需要停止在错误的情况下停止提交（通过返回false）或使用AJAX使用
function calculateCost() {
var cost = 0;
var selPet = document.querySelector("[name=pet]:checked");
var selColour = document.querySelector("[name=colour]:checked");
if (!selPet) {
alert("No Pets");
return false;
}
if (!selColour) {
alert("No Colour");
return false;
}
cost = (+selPet.value) + (+selColour.value);
// cost = (+selPet.value) * (+selColour.value);
alert("You have selected a " + selPet.value + " and the colour selected was " + selColour.value + ", the total cost is $" + cost);
return false // return true; // submits
}<h1> Adopt a pet </h1>
<form onsubmit="return calculateCost()">
<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="submit" value="Submit" />
</form>这比您的工作要简单得多。 .querySelector() dom方法使获得检查的广播按钮非常简单（请参见下面的代码中的注释）：
function calculateCost() {
var cost = 0;
var selectedPet = ["Cat", "Dog", "Rabbit"];
var selectedColour = ["Black", "Gold", "White"];
// Query each group for a checked radio button:
var petRadio = document.querySelector("input[name=pet]:checked");
var colorRadio = document.querySelector("input[name=colour]:checked");
// If each variable holds a valid reference to an element,
// then a pet and a color were chosen/
if(petRadio && colorRadio){
// A string holding a number can be converted quickly to a number by
// prepending a plus sign in front of it. For multiplication, just use *
// as the operator insteach of + (the one in the middle)
cost = +petRadio.value + +colorRadio.value;
alert("You have selected a " + petRadio.id +
" and the colour selected was " +
colorRadio.id +
", the total cost is $" + cost);
} else {
// Otherwise, one or both were not chosen
alert("You must select a pet and a color!");
}
}<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>