This problem has been bugging me for days now, basically everytime i click a radio button in the alert box it only selects saab so it would say ' the vehicle you selected was saab' if i clicked on the others it still would say the same thing.
Any help would be apperciated
var myForm = document.getElementById('myForm');
var output = document.getElementById('output');
var qty = document.getElementById('qty');
var Price = document.getElementById('price');
// Validation Errors
var errors = [];
// Which item is chosen?
var chosen = 0;
var chosen1 =0;
// Define the price & name of the items we're selling
var items = ['Saab', 'Ford Galaxy' , 'Lexus is200'];
var mpg = ['66' , '51' , '45' ];
var handleSubmit = function(e){
// Prevent Form Submitting
e.preventDefault();
if(validateForm()){
var item = items[chosen];
var mpgs = mpg[chosen1];
output.innerHTML =alert ('The vehicle type is' + item + '');
output.innerHTML =alert( + (qty.value / mpgs)+ 'Gallons' +(qty.value/mpgs*4.55)+'litres Cost:' +(qty.value/mpgs*4.55*price.value)+'');
}else{
output.innerHTML = 'Error:<br>- ' + errors.join('<br>- ');
}
};
// Check if a radio button is checked or not & set the chosen item
var isChecked = function(){
var checked = false
var radios = document.getElementsByClassName('radio');
for(var i = 0; i < radios.length; i++){
if(radios[i].checked){
checked = true;
chosen = radios[i].value;
}
}
return checked;
};
// Check if the form validates
var validateForm = function(){
// Make sure you clear the previous errors
errors = [];
var valid = true;
if(qty.value == ''){
valid = false;
errors.push('Ensure a quantity has been entered.');
}
if(isNaN(qty.value)){
valid = false;
errors.push('Ensure the quantity is a number value');
}
if(Price.value == ''){
valid = false;
errors.push('Ensure you have entered the price of the petrol.');
}
return valid;
};
myForm.addEventListener('submit', handleSubmit);