时间戳

首页 > 解决方案 > 使用计算 Javascript 获取字符串以显示

javascript - 使用计算 Javascript 获取字符串以显示

问题描述

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

由于某种原因，肉串不会显示任何内容。理想情况下，它将显示：

培根、猪肉、意大利腊肠（任何其他选择）

但无论出于何种原因，它都不会显示。

提前致谢！

标签： javascriptforms

解决方案

将您的功能更改为这个 

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

推荐阅读