通过计算 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

将您的 function 更改为这个

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

Answer 2

 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>

这个怎么样。 代码正在工作。