Комбинированный выход 2 функции в javascript

Question

Я относительно новичок в Javascript (био python фон) и пытаюсь добавить простую функцию на сайт.

По сути, мне нужно принять пользовательский ввод для 4 типов меню ( флажки ), а затем умножьте сумму значений ($) выбранных меню на количество дней и количество людей ( пользовательский ввод с использованием текстовых полей ).

Ниже приведены HTML и Javascript части кода

function multiply() {
  var n_ppl = document.getElementsByName('people')[0].value;
  var n_days = document.getElementsByName('days')[0].value;
  return var out = n_ppl * n_days; 
}
  
function totalIt() {
  var n_ppl = document.getElementsByName('people')[0].value;
  var n_days = document.getElementsByName('days')[0].value;
  var input = document.getElementsByName("product");
  var total = 0;
  for (var i = 0; i < input.length; i++) {
    if (input[i].checked) {
      total += parseInt(input[i].value);
    }
  return var price = total
}

  // not sure how can I get - var final = total * out
  // after I get it I can finally do - document.getElementsByName("total")[0].value = "$" + final.toFixed(2);

<br> Breakfast <input name="product" value="12" type="checkbox" onclick="totalIt()" /> <br>
<br> First Meal <input name="product" value="20" type="checkbox" onclick="totalIt()" /> <br>
<br> Second Meal <input name="product" value="15" type="checkbox" onclick="totalIt()" /> <br>
<br> Craft Service <input name="product" value="10" type="checkbox" onclick="totalIt()" /> <br>
<br> Number of People <input type="text" name="people"> <br>
<br> Number of Days <input type="text" name="days"> <br>
<br> Total: <input value="$0.00" readonly="readonly" type="text" name="total" />

Я заранее прошу прощения у всех веб-разработчиков за мой стиль pythoni c.

Я должен также отметить, что обе функции работают отлично отдельно, но даже без попытки умножить их выходные данные (т.е. даже если их код присутствует рядом друг с другом), ничего не работает. Буду очень признателен за вашу помощь!

Answer 1

• Вам нужно только одна функция для перебора ваших входных данных.
• Не использовать inline JavaScript это признак плохих привычек кодирования и затрудняет отладку приложения , Храните JS в одном месте и используйте Element.addEventListener()
• Используйте Node.querySelector() и Node.querySelectorAll()
• Используйте синтаксис name="product[]" при обработке похожих имен , Это будет передано на сервер в виде массива значений.
• Вы можете использовать Array.prototype.reduce () , чтобы уменьшить (накапливать) все значения '[name="product[]"]:checked' чечбоксов до единого целого числа
• Поместить код <script> вправо до закрывающего тега </body>

const EL_menu  = document.querySelector("#menu");

const calcPrice = evt => {

  const price = [...EL_menu.querySelectorAll('[name="product[]"]:checked')]
    .reduce((n, el) => (n += +el.value, n), 0);
    
  const nPers = +EL_menu.querySelector('[name="people"]').value || 1;
  const nDays = +EL_menu.querySelector('[name="days"]').value || 1;
  const total = price * nPers * nDays;
  
  EL_menu.querySelector("[name=total]").value = `\$${total.toFixed(2)}`;
}

EL_menu.querySelectorAll("input").forEach(el => el.addEventListener('input', calcPrice));

#menu label { display: block; }

<div id="menu">
  <label><input type="checkbox" name="product[]" value="12"> Breakfast</label>
  <label><input type="checkbox" name="product[]" value="20"> First Meal</label>
  <label><input type="checkbox" name="product[]" value="15"> Second Meal</label>
  <label><input type="checkbox" name="product[]" value="10"> Craft Service</label>
  <label><input type="number" name="people" value="1" min="1"> Number of People</label>
  <label><input type="number" name="days" value="1" min="1"> Number of Days</label><br>
  Total: <input type="text" name="total" value="$0.00" readonly="readonly">
</div>