Hi I'm a noob and I need help!
As shown in the coding provided below, it works fine if I remove all the 'Vaccinate checkbox' properties. But I need it.
- The checkbox does NOT need an alert box if not selected
- If checkbox is not selected it should just calculate the selected Pet and Colour
- If checkbox is selected it should calculate all three selected values
- Please try to keep most of the code provided as much as possible
Thankyou in advance!
function calculateCost() {
var radioButton;
var checkbox;
var pet;
var colour;
var vaccinate;
var cost = 0;
var selectedPet = ["Cat", "Dog", "Rabbit"];
var selectedColour = ["Black", "Gold", "White"];
var selectedVaccinate = ["With vaccinations"];
var selectedPetCost;
var selectedColourCost;
var selectedVaccinateCost;
for (var i = 1; i <= 3; i++) {
radioButton = document.getElementById(selectedPet[i - 1]);
if (radioButton.checked == true) {
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!');
}
for (var i = 1; i <= 1; i++) {
checkbox = document.getElementById(selectedVaccinate[i - 1]);
if (checkbox.checked == true) {
pet = selectedVaccinate[i - 1];
selectedVaccinateCost = parseInt(checkbox.value);
}
}
if (pet && colour && vaccinate) {
cost = selectedPetCost * selectedColourCost * selectedVaccinateCost;
alert("You have selected a " + pet + " and the colour selected was " + colour + ", the total cost is $" + cost);
}
if (pet && colour) {
cost = selectedPetCost * selectedColourCost;
alert("You have selected a " + pet + " and the colour selected was " + colour + ", the total cost is $" + cost);
}
}
<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><label for="vaccinate">With vaccinations
<input type="checkbox" id="vaccinate" name="vaccinate" value="5"></label><br></p>
<p><input type="button" value="Submit" onClick="calculateCost();">
</form>
Aucun commentaire:
Enregistrer un commentaire