как вывести итоговое значение в тэге?

191

16 апреля 2017, 01:33

есть такой код 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 со значениями ввода чисел)

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

Answer 1

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

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 вместо прямого обращения к переменной.