Я новичок в 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;
}

По какой-то причине строка с мясом ничего не отображает. В идеале он должен отображать:

Бекон, Свинина, Салями (любой другой выбор)

Но по какой-то причине он не отображается.

Заранее спасибо!

0
JLP 28 Окт 2019 в 00:37
1
Просто вызовите meatOnPizza (); в функцию pizzaMeatPrice.
 – 
dnaz
28 Окт 2019 в 00:49
Мой Javascript находится в отдельном файле и связан с HTML-документом. Он работает с более ранними функциями (с переключателями), но не с установленными флажками.
 – 
JLP
28 Окт 2019 в 00:55
Вы пробовали это?
 – 
dnaz
28 Окт 2019 в 01:04
Я думаю, что это то, что Максимилиано Поджио опубликовал ниже, он не вычисляет и не возвращает строку.
 – 
JLP
28 Окт 2019 в 01:10

2 ответа

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

function pizzaMeatPrice () {
      selectedElm.innerHTML = document.querySelectorAll('input[name=meat]:checked').length*0.25;
      meatOnPizza();
    }
0
Maximiliano Poggio 28 Окт 2019 в 00:50
Эта функция не отображает ни цену, ни выбор пользователя.
 – 
JLP
28 Окт 2019 в 01:01
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>

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

0
dnaz 28 Окт 2019 в 01:30
Это работает для отображения строки! Однако он не рассчитывает цену в браузере (с использованием notepad ++ и chrome), но рассчитывает в JSFiddle.
 – 
JLP
28 Окт 2019 в 01:41