Получение строки для отображения с расчетом Javascript

Question

Я новичок в Javascript, и я пытаюсь получить строку выбора для одновременного отображения, поскольку выполняется вычисление количества отмеченных полей (как цены). Я хотел бы использовать ванильный Javascript для этого.

HTML

<h3> Select Toppings </h3> 
        <form id="pizza-meat">
    <input type="checkbox" name="meat" onclick="meatOnPizza()" value="Italian Sausage">Italian Sausage<br>
  <input type="checkbox" name="meat" onclick="meatOnPizza()" value="Bacon">Bacon<br>
    <input type="checkbox" name="meat" onclick="meatOnPizza()" value="Canadian Bacon">Canadian Bacon<br>
    <input type="checkbox" name="meat" onclick="meatOnPizza()" value="Meatballs">Meatballs<br>
    <input type="checkbox" name="meat" onclick="meatOnPizza()" value="Ham">Ham<br>
    <input type="checkbox" name="meat" onclick="meatOnPizza()" value="Grilled Chicken">Grilled Chicken<br>
    <input type="checkbox" name="meat" onclick="meatOnPizza()" value="Beef">Beef<br>
    <input type="checkbox" name="meat" onclick="meatOnPizza()" value="Pork">Jalapeno Peppers <br>
    <input type="checkbox" name="meat" onclick="meatOnPizza()" value="Slim Jims"> Slim Jims <br>
  <input type="checkbox" name="meat"  onclick="meatOnPizza()" value="Salami"> Salami <br>
    <input type="checkbox" name="meat" onclick="meatOnPizza()" value="Anchovies"> Anchovies <br>
    </form> 

    <output id="result">Meat Price: <span id="selected2">0</span></output>

    Meat: <output id="pizzaMeat"> </output>

Javascript

var selectedElm = document.getElementById('selected2');

function pizzaMeatPrice () {
  selectedElm.innerHTML = document.querySelectorAll('input[name=meat]:checked').length*0.25;
}

document.querySelectorAll("input[name=meat]").forEach(i=>{
 i.onclick =() => pizzaMeatPrice();
});

function meatOnPizza() {
  var meat = document.getElementById("pizza-meat");
  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

var selectedElm = document.getElementById('selected2');

function pizzaMeatPrice () {
  selectedElm.innerHTML = document.querySelectorAll('input[name=meat]:checked').length*0.25;
  meatOnPizza();
}

document.querySelectorAll("input[name=meat]").forEach(i=>{
 i.onclick =() => pizzaMeatPrice();
});

function meatOnPizza() {
  var meat = document.getElementById("pizza-meat");
  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;

}

<h3> Select Toppings </h3> 
        <form id="pizza-meat">
    <input type="checkbox" name="meat" onclick="meatOnPizza()" value="Italian Sausage">Italian Sausage<br>
  <input type="checkbox" name="meat" onclick="meatOnPizza()" value="Bacon">Bacon<br>
    <input type="checkbox" name="meat" onclick="meatOnPizza()" value="Canadian Bacon">Canadian Bacon<br>
    <input type="checkbox" name="meat" onclick="meatOnPizza()" value="Meatballs">Meatballs<br>
    <input type="checkbox" name="meat" onclick="meatOnPizza()" value="Ham">Ham<br>
    <input type="checkbox" name="meat" onclick="meatOnPizza()" value="Grilled Chicken">Grilled Chicken<br>
    <input type="checkbox" name="meat" onclick="meatOnPizza()" value="Beef">Beef<br>
    <input type="checkbox" name="meat" onclick="meatOnPizza()" value="Pork">Jalapeno Peppers <br>
    <input type="checkbox" name="meat" onclick="meatOnPizza()" value="Slim Jims"> Slim Jims <br>
  <input type="checkbox" name="meat"  onclick="meatOnPizza()" value="Salami"> Salami <br>
    <input type="checkbox" name="meat" onclick="meatOnPizza()" value="Anchovies"> Anchovies <br>
    </form> 

    <output id="result">Meat Price: <span id="selected2">0</span></output><br>

    Meat: <output id="pizzaMeat"> </output>

Как насчет этого. Коды работают.

Answer 2

Измените свою функцию на эту

function pizzaMeatPrice () {
      selectedElm.innerHTML = document.querySelectorAll('input[name=meat]:checked').length*0.25;
      meatOnPizza();
    }