Калькулятор умножения и сложения

120

02 января 2020, 16:50

Есть калькулятор, не пойму как перемножить кол-во на стоимость курса затем сложиь значения всех полей и вывести в итого, подскажите плизз..

.calculator { 
  max-width: 990px; 
  margin: auto; 
} 
.calculator__body { 
    display: flex; 
    margin-bottom: 20px; 
} 
li { 
  list-style: none; 
} 
 
.calculator__input.calc--border:last-child { 
        border-bottom: none; 
} 
.calculator__raschet { 
    display: flex; 
} 
.calculator__center { text-align: center; } 
.calculator__item { 
    padding: 10px; 
    transition: all .1s linear; 
} 
     
.calculator__item:hover { 
      background-color: #72cbf6; 
  } 
.calculator__item:nth-child(odd) { 
      background-color: #ccded7; 
  } 
 
.calculator__itogo { 
    display: flex; 
    align-items: center; 
} 
.calculator__itogo span { 
    margin-right: 10px; 
} 
 
.calculator__itogo input[type="number"] { 
      margin-top: 0; 
      height: 50px; 
      border: 1px solid #CCCCCC; 
    } 
.calculator__btn { 
    text-align: center; 
    height: 50px; 
    cursor: pointer; 
    line-height: 50px; 
    margin-right: 30px; 
    width: 200px; 
    background-color: #0071a6; 
    font-size: 18px; 
    color: #ffffff; 
} 
.calculator__btn input { 
    width: 20%; 
    padding: 10px; 
    border: 1px solid #CCCCCC; 
} 
 
input.calc__input { 
  margin-top: 0; 
  padding: 0; 
  height: 38px; 
  text-align: center; 
  border-top: 1px solid #000; 
  border-bottom: 1px solid #000; 
  &:last-child { border-top: none; } 
  &:focus { 
    border-radius: 0; 
    border-left: none; 
    border-right: none; 
  } 
 
} 
 
td { 
  border: 1px solid #000; 
} 
 
th { 
  padding: 10px; 
  border: 1px solid #000; 
} 
 
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<div class="calculator"> 
  <div class="calculator__body"> 
    <table class="calculator__table"> 
      <thead> 
        <tr> 
          <th>Список курсов</th> 
          <th>Продолжительность</th> 
          <th>Стоимость</th> 
          <th>кол-во/чел.</th> 
        </tr> 
      </thead> 
      <tbody> 
        <tr> 
          <td> 
            <ul class="calculator__list"> 
              <li class="calculator__item">Охрана труда при работах на высоте</li> 
              <li class="calculator__item">Охрана труда для руководителей и специалистов</li> 
              <li class="calculator__item">Пожарно-технический минимум</li> 
              <li class="calculator__item">Повышение квалификации</li> 
              <li class="calculator__item">Повышение квалификации для работ на особо опасных объектах</li> 
              <li class="calculator__item">Профессиональная переподготовка</li> 
              <li class="calculator__item">Профессиональная переподготовка</li> 
              <li class="calculator__item">Оказание первой медицинской помощи</li> 
            </ul> 
          </td> 
          <td class="calculator__center"> 
            <ul class="calculator__list"> 
              <li class="calculator__item">---</li> 
              <li class="calculator__item">---</li> 
              <li class="calculator__item">---</li> 
              <li class="calculator__item">72 часа</li> 
              <li class="calculator__item">112 часов</li> 
              <li class="calculator__item">256 часов</li> 
              <li class="calculator__item">512 часов</li> 
              <li class="calculator__item">---</li> 
            </ul> 
          </td> 
          <td class="calculator__center"> 
            <ul class="calculator__list"> 
              <li class="calculator__item">3000 руб.</li> 
              <li class="calculator__item">2500 руб.</li> 
              <li class="calculator__item">2500 руб.</li> 
              <li class="calculator__item">4000 руб.</li> 
              <li class="calculator__item">5000 руб.</li> 
              <li class="calculator__item">15000 руб.</li> 
              <li class="calculator__item">20000 руб.</li> 
              <li class="calculator__item">4000 руб.</li> 
            </ul> 
          </td> 
          <td class="calculator__inputs"> 
            <ul class="calculator__list"> 
              <li class="calculator__input"> 
                <input class="calc__input" type="number" value=""> 
              </li> 
              <li class="calculator__input"> 
                <input class="calc__input" type="number" value=""> 
              </li> 
              <li class="calculator__input"> 
                <input class="calc__input" type="number" value=""> 
              </li> 
              <li class="calculator__input"> 
                <input class="calc__input" type="number" value=""> 
              </li> 
              <li class="calculator__input"> 
                <input class="calc__input" type="number" value=""> 
              </li> 
              <li class="calculator__input"> 
                <input class="calc__input" type="number" value=""> 
              </li> 
              <li class="calculator__input"> 
                <input class="calc__input" type="number" value=""> 
              </li> 
              <li class="calculator__input"> 
                <input class="calc__input calc--border" type="number" value=""> 
              </li> 
            </ul> 
          </td> 
        </tr> 
      </tbody> 
    </table> 
  </div> 
  <div class="calculator__raschet"> 
    <div class="calculator__btn">Расчитать</div> 
    <div class="calculator__itogo"><span>Итого:</span> 
      <input type="number" value="">

Answer 1

$(document).ready(function(){ 
  var $price = $('.calculator__list:eq(2) li') 
  var $count = $('.calculator__list:eq(3) input') 
  var $result = $('#result') 
  var $calc_btn = $('#calc_btn') 
   
  $calc_btn.click(function(){ 
    var summ = 0 
    $price.each(function(idx, item){ 
      price = parseFloat(item.textContent) 
      count = parseFloat($count.eq(idx).val()) 
      summ += price * count 
    }) 
    $result.val(summ) 
  }) 
   
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<div class="calculator"> 
  <div class="calculator__body"> 
    <table class="calculator__table"> 
      <thead> 
        <tr> 
          <th>Список курсов</th> 
          <th>Продолжительность</th> 
          <th>Стоимость</th> 
          <th>кол-во/чел.</th> 
        </tr> 
      </thead> 
      <tbody> 
        <tr> 
          <td> 
            <ul class="calculator__list"> 
              <li class="calculator__item">Охрана труда при работах на высоте</li> 
              <li class="calculator__item">Охрана труда для руководителей и специалистов</li> 
              <li class="calculator__item">Пожарно-технический минимум</li> 
              <li class="calculator__item">Повышение квалификации</li> 
              <li class="calculator__item">Повышение квалификации для работ на особо опасных объектах</li> 
              <li class="calculator__item">Профессиональная переподготовка</li> 
              <li class="calculator__item">Профессиональная переподготовка</li> 
              <li class="calculator__item">Оказание первой медицинской помощи</li> 
            </ul> 
          </td> 
          <td class="calculator__center"> 
            <ul class="calculator__list"> 
              <li class="calculator__item">---</li> 
              <li class="calculator__item">---</li> 
              <li class="calculator__item">---</li> 
              <li class="calculator__item">72 часа</li> 
              <li class="calculator__item">112 часов</li> 
              <li class="calculator__item">256 часов</li> 
              <li class="calculator__item">512 часов</li> 
              <li class="calculator__item">---</li> 
            </ul> 
          </td> 
          <td class="calculator__center"> 
            <ul class="calculator__list"> 
              <li class="calculator__item">3000 руб.</li> 
              <li class="calculator__item">2500 руб.</li> 
              <li class="calculator__item">2500 руб.</li> 
              <li class="calculator__item">4000 руб.</li> 
              <li class="calculator__item">5000 руб.</li> 
              <li class="calculator__item">15000 руб.</li> 
              <li class="calculator__item">20000 руб.</li> 
              <li class="calculator__item">4000 руб.</li> 
            </ul> 
          </td> 
          <td class="calculator__inputs"> 
            <ul class="calculator__list"> 
              <li class="calculator__input"> 
                <input class="calc__input" type="number" value="1"> 
              </li> 
              <li class="calculator__input"> 
                <input class="calc__input" type="number" value="1"> 
              </li> 
              <li class="calculator__input"> 
                <input class="calc__input" type="number" value="1"> 
              </li> 
              <li class="calculator__input"> 
                <input class="calc__input" type="number" value="1"> 
              </li> 
              <li class="calculator__input"> 
                <input class="calc__input" type="number" value="1"> 
              </li> 
              <li class="calculator__input"> 
                <input class="calc__input" type="number" value="1"> 
              </li> 
              <li class="calculator__input"> 
                <input class="calc__input" type="number" value="1"> 
              </li> 
              <li class="calculator__input"> 
                <input class="calc__input calc--border" type="number" value="1"> 
              </li> 
            </ul> 
          </td> 
        </tr> 
      </tbody> 
    </table> 
  </div> 
  <div class="calculator__raschet"> 
    <button id="calc_btn" class="calculator__btn">Расчитать</button> 
    <div class="calculator__itogo"><span>Итого:</span> 
      <input id="result" type="number" value="">

Код конечно даже близко не похож на идеал как это должно было бы делаться правильно, но я отталкивался от приведённого примера.

Берём колонку с ценой за курс, вернее каждый элемент списка из неё, функция parseFloat позволяет выдернуть из текста число отбрасывая текст идущий после числа, затем по индексу сопоставляем с соответствующим полем ввода количества человек и перемножаем.