samedi 26 octobre 2019

Javascript can't get checkbox values to display string of information

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