Вот мой кодекс: https://codepen.io/CwittleZ/pen/vdzazO?editors=1010

Когда вы нажимаете на выбор мяса, он помещается в массив и затем отображается, но между выборами нет места. Как мне добавить это место?

function meatSelected() {
  var meat = [];
  var meatChecked = document.querySelectorAll(
    "input[name=meat_options]:checked"
  );
  for (var i = 0; i < meatChecked.length; i++) {
    meat.push(meatChecked[i].value);
  }
  console.log(meat);
  document.getElementById("meat").innerHTML = meat;
}

Кроме того, мне нужно одно мясо, чтобы быть свободным, но все остальное будет лишним. Я не знаю, как и где добавить, что «если проверено мясо> 1, все остальные виды мяса будут стоить дополнительно по 1 долл. США». Есть ли какой-нибудь способ доступа к функции meatSelected для этой цели? Я только начинаю с JavaScript, поэтому, пожалуйста, не используйте jQuery и простые термины, если это возможно, даже если это более длинный код. Я просто хочу понять, почему это работает.

  if (document.getElementById("pepperoni").checked) {
    add += 1;
  }
  if (document.getElementById("sausage").checked) {
    add += 1;
  }
  if (document.getElementById("canadian_bacon").checked) {
    add += 1;
  }
  if (document.getElementById("ground_beef").checked) {
    add += 1;
  }
  if (document.getElementById("anchovy").checked) {
    add += 1;
  }
  if (document.getElementById("chicken").checked) {
    add += 1;
  }
0
Queen of the North 25 Фев 2018 в 05:12

3 ответа

Лучший ответ

Ответ находится в строке 83 в части JavaScript вашего примера. В строке 77 вы сделали множество возможных видов мяса. Затем вы просто использовали этот массив и прикрепили его к innerHTML как есть, так что браузер должен сделать его строкой. К сожалению, это не заботится о местах.

Итак, просто измените эту строку на это:

document.getElementById("meat").innerHTML = meat.join(", ");

Он будет использовать ваш уже созданный массив и конвертировать его непосредственно в строку, с "," между каждым из его дочерних элементов.

И на ваш второй вопрос, есть больше возможных решений, я реализовал самое простое в этом коде: https://codepen.io/anon/pen/ddqqyY?editors=1010. Просто суммируйте количество уже выбранных мясных продуктов, и если оно больше нуля, вычтите 1 из общего количества.

0
marizikmund 25 Фев 2018 в 02:33
document.getElementById("meat").innerHTML = meat.map(m => ` ${m}`);

Вот ваш кодовый блок, который был изменен https://codepen.io/jayas/pen/bLxjXo ? редакторы = 1010

изменить в соответствии с предложением

  1. ${m} вместе с включенными галочками ``, используемыми в выражении, называется литерал шаблона. Шаблонные литералы могут содержать заполнители и они обозначены знаком доллара и фигурными скобками ${}.

  2. [].map(callBackFunc), использованный выше, является методом метод, который создает новый массив, каждый элемент которого является результатом функции обратного вызова.

0
Jaya 25 Фев 2018 в 22:41

Я бы обернул каждый ваш выбор в «промежуток», и добавил бы поле после. Вы используете innerHTML, так что вы можете просто сделать это таким образом. Это обеспечит большую гибкость, чем стиль текста.

0
jmg 25 Фев 2018 в 02:17