I'm trying to build a simple order form in HTML, CSS and Javascript. I'm a beginner and am trying to have the input display a summary of the order as the user selects their order. I was able to make this work with radio buttons by doing the following:
HTML:
<input type="radio" name="crust" onclick="crustOfPizza(this.value)" value="Original"> Original <br>
<input type="radio" name="crust" onclick="crustOfPizza(this.value)" value="Garlic and Herb"> Garlic and Herb <br>
</form>
<p> Crust: </p> <output id="pizzaCrust"> </output> </br>
Javascript:
function crustOfPizza(crust) {
document.getElementById("pizzaCrust").value = crust;
}
However, I can't seem to get a similar result with checkboxes. I've tried the following:
HTML:
<input type="checkbox" name="meat" onclick="meatOnPizza()" value="Sausage">Sausage<br>
<input type="checkbox" name="meat" onclick="meatOnPizza()" value="Bacon">Bacon<br>
</form>
<p> Meat: </p> <output id="pizzaMeat"> </output>
Javascript:
var meat = document.forms[0];
var txt = "";
var i;
for (i = 0; i < meat.length; i++) {
if (meat[i].checked) {
txt = txt + meat[i].value + " ";
}
}
document.getElementById("pizzaMeat").value = txt;
}
I appreciate any guidance anyone can offer!
Jessica
Aucun commentaire:
Enregistrer un commentaire