0

есть такой код https://jsfiddle.net/mp2sLudk/1/

нужно в тегах <strong id="sumPrice"></strong> вывести итоговое значение, которое должно браться из 3 тегов

<p id="priceCD"></p>
<p id="priceDVD5"></p>
<p id="priceDVD9"></p>

результаты этих тегов, это результат умножения 2 инпутов (чекбокс со значением value и text со значениями ввода чисел)

как это можно реализовать?

1 ответ 1

0

Расчет промежуточных и окончательной сумм можно выделить в одну функцию, которую вызывать при любых изменениях. В ней же можно сделать вывод общей суммы:

cdR.addEventListener("change", sum);
forDVD5.addEventListener("input", sum);
dvd5.addEventListener("change", sum);
forDVD9.addEventListener("input", sum)
dvd9.addEventListener("change", sum);
forCD.addEventListener("input", sum);

function sum() {
  var totalSum = 0,
    cdRSum = 0,
    dvd5Sum = 0,
    dvd9Sum = 0;

  // считаем сумму для cdR
  if (cdR.checked) {
    cdR.value = 27;
    cdRSum = cdR.value * forCD.value;
    priceCD.innerHTML = cdRSum;
  } else {
    cdR.value = 0;
    cdRSum = 0;
    priceCD.innerHTML = "";
  }
  // считаем сумму для dvd5
  if (dvd5.checked) {
    dvd5.value = 29;
    dvd5Sum = dvd5.value * forDVD5.value;
    priceDVD5.innerHTML = dvd5Sum;
  } else {
    dvd5.value = 0;
    dvd5Sum = 0;
    priceDVD5.innerHTML = "";
  }
  // считаем сумму для dvd9
  if (dvd9.checked) {
    dvd9.value = 46;
    dvd9Sum = dvd9.value * forDVD9.value;
    priceDVD9.innerHTML = dvd9Sum;
  } else {
    dvd9.value = 0;
    dvd9Sum = 0;
    priceDVD9.innerHTML = "";
  }
  // общая сумма
  totalSum = cdRSum + dvd5Sum + dvd9Sum;
  document.getElementById('sumPrice').innerText = totalSum;
}
<div class="row" id="summary">
  <div class="col-sm-6">
    <h6 class="text-muted" align="center">Выбрать тип диска</h6>
    <div class="checkbox col-md-4">
      <label class="checkbox-inline">
        <input type="checkbox" id="cdR" class="disks"> CD
      </label>
      <div class="count-plus-minus">
        <p><span class="glyphicon glyphicon-minus-sign"></span><input type="text" maxlength="3" class="form-control count-input countDisks" value="0" name="count" id="forCD"><span class="glyphicon glyphicon-plus-sign"></span></p>
      </div>
      <p id="priceCD"></p>
    </div>
    <div class="checkbox col-md-4">
      <label class="checkbox-inline">
        <input type="checkbox" id="dvd5" class="disks"> DVD-5
      </label>
      <div class="count-plus-minus">
        <p><span class="glyphicon glyphicon-minus-sign"></span><input type="text" maxlength="3" class="form-control count-input countDisks" value="0" name="count" id="forDVD5"><span class="glyphicon glyphicon-plus-sign"></span></p>
      </div>
      <p id="priceDVD5"></p>
    </div>
    <div class="checkbox col-md-4">
      <label class="checkbox-inline">
        <input type="checkbox" id="dvd9" class="disks"> DVD-9
      </label>
      <div class="count-plus-minus">
        <p><span class="glyphicon glyphicon-minus-sign"></span><input type="text" maxlength="3" class="form-control count-input countDisks" value="0" name="count" id="forDVD9"><span class="glyphicon glyphicon-plus-sign"></span></p>
      </div>
      <p id="priceDVD9"></p>
    </div>
  </div>
  <div class="col-sm-3" id="price">
    <h4 class="text-muted itog-price" align="right">Цена: <strong id="sumPrice"></strong> </h4>
  </div>

И лучше использовать для всех инпутов getElementById вместо прямого обращения к переменной.

4
  • а как потом все эти значения сохранить, чтобы при переходе на другую страницу подтягивалась сумма в теги <span id="itogPrice"></span>?
    – Олег
    17 апр 2017 в 8:43
  • Сессионные переменные/cookie/localStorage/GET-параметры/переход с отправкой в форме POST-параметров
    – br3t
    17 апр 2017 в 8:46
  • пытаюсь все значения передать в localStorage, но у меня при перезагрузке страницы всё пропадает
    – Олег
    17 апр 2017 в 8:54
  • Без вашего кода не определить, в чем у вас проблема
    – br3t
    17 апр 2017 в 9:06

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.