Javascript не может получить значения флажков для отображения строки информации

Question

Я пытаюсь создать простую форму заказа в HTML, CSS и Javascript. Я новичок и пытаюсь, чтобы на входе отображалась сводка заказа, когда пользователь выбирает их заказ. Мне удалось выполнить эту работу с переключателями, выполнив следующие действия:

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;  
}

Однако я не могу получить аналогичный результат с флажками. Я пробовал следующее:

HTML:

<form id="pizza-meat">
    <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:

function meatOnPizza() {
  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;
}

Я ценю любыеруководство, которое может предложить каждый!

Джессика

Answer 1

Ну, кажется, вы просто забыли вставить открывающий тег <form> перед вашими флажками.

После вставки этого (и объявления функции, которое также отсутствует в опубликованном вами коде JS), ваш кодотлично работает:

Редактировать: Я попробовал ваш обновленный код, и он отлично работает (см. фрагмент ниже). Причиной вашей проблемы может быть то, что эта форма не является первой формой на вашей странице, что приводит к тому, что document.forms[0]; возвращает неправильную форму.

Ну, так как вы назначили идентификаторв этой форме, почему бы не использовать его напрямую вместо document.forms? Тогда вы можете заменить

var meat = document.forms[0];

на:

var meat = document.getElementById("pizza-meat");

function meatOnPizza() {
  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;
}

<form id="pizza-meat">
    <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>