Не корректно выводятся данные в калькуляторе

Question

Написал калькулятор который должен подсчитывать стоимость материала по таким параметрам:

Цена материала за 1 м.кв;
Ширина;
Высота;
Квадратура общая;
С учетом сборки (в виде чекбокса);
Итоговая стоимость.

Как на картинке показано, цена какая-то заоблачная, много нулей и квадратуру не правильно показывает.
Должно быть, по идее, за квадрат - 86грн, в - 200мм, ш - 200мм, Квадрат 0,04 м.кв, за сборку + 150 грн. Ну и итоговая цена явно не такая выходит уже, как на картинке.

jQuery(document).ready(function($) {
  /*  влияет на расчет с учетом раскроя */
  var nevedomajaPeremennaja = 1;
  $('.glass-spisok option').each(function() {
    $(this).val($(this).attr('c0'));
  });
  /* поведение селекта */
  $('.glass-spisok').change(function() {
    $('.glass-spisok-c').html($(this).val() + ' грн.');
    calc();
  });
  /* поведение инпутов ШИРИНА и ВЫСОТА */
  $('.shirina, .visota').on('input', function() {
    var val_1 = $(this).val(),
      second = $(this).is('.shirina') ? 'visota' : 'shirina',
      val_2 = $('.' + second).val();
    if (val_1 && val_2) {
      $('.kvadratura').html((val_1 * val_2 / 1000) + 'м<sup>2</sup>');
      $('.kvadratura-tr').fadeOut(0, function() {
        $(this).fadeIn(0.900);
      });
      calc();
    }
  });
  /* поведение инпута УГЛЫ */
  $('.ucet-uglov-input').on('input', function() {
    var val = $(this).val() * nevedomajaPeremennaja;
    if (val) {
      $('.cena-pm').html(val);
      $('.cena-pm-tr').fadeOut(0, function() {
        $(this).fadeIn(900);
      });
    }
    calc();
  });
  /* поведение кнопки ИТОГО */
  $('.submit').click(calc);
  function calc() {
    var glass = $('.glass-spisok').val(),
      shirina = $('.shirina').val(),
      visota = $('.visota').val(),
      ucet_uglov = $('.ucet-uglov-input').val() || 1,
      fields_ready = 0;
    /* проверка полей */
    switch (true) {
      case !shirina:
        $('.shirina').get(0).focus();
        break;
      case !visota:
        $('.visota').get(0).focus();
        break;
      default:
        fields_ready = 1;
        break;
    }
    if (!fields_ready) {
      return;
    }
    $('.itogo-calc').html(glass + shirina * visota * ucet_uglov + ' грн.');
  }
  //блокирует поле "с учетом углов"
  $('.ucet-uglov').on('change', function() {
    var inp = $('.ucet-uglov-input');
    !$(this).is(':checked') ?
      (inp.attr('disabled', 'disabled').val(''), $('.cena-pm-tr').fadeOut(0, function() {
        $('.cena-pm').html('');
      })) :
      inp.removeAttr('disabled').get(0).focus();
    calc();
  });
  $('.glass-spisok-c').html($('.glass-spisok').val() + ' грн.');
});

.price {
  padding: 20px 20px 0px 20px;
  min-height: 200px;
  border-radius: 10px;
  max-width: 450px;
  border: 3px solid #0099ff;
  background: #d5cff9;
}

.glass-spisok {
  width: 180px;
}

.calc_title {
  font-size: 28px;
  color: #ee1d25;
  margin: 0 0 20px;
}

span.itogo-calc {
  color: #ed1d25;
  font-size: 20px;
}

.calculator input[type="text"],
select {
  padding: 5px 10px;
  border: 1px solid #ccc;
  margin-right: 10px;
  margin-bottom: 10px;
}

<html lang="ru-RU">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>

<body>
  <div class="price">
    <div class="calc_title">Рассчет стоимости душевой кабины</div>
    <table>
      <tr>
        <td>Выберите душевую кабину</td>
        <td>
          <select class="glass-spisok">
            <option value="0" c0="129">1 вариант</option>
            <option value="0" c0="129">2 вариант</option>
            <option value="0" c0="86">3 вариант</option>
            <option value="0" c0="110">4 вариант</option>
            <option value="0" c0="115">5 вариант</option>
            <option value="0" c0="100">6 вариант</option>
          </select><br /> Цена за квадрат<br />
          <span class="glass-spisok-c"></span>
        </td>
      </tr>
      <tr>
        <td>Введите ширину, мм</td>
        <td><input type="number" min="0" value="0" name="" class="shirina"></td>
      </tr>
      <tr>
        <td>Введите высоту, мм</td>
        <td><input type="number" min="0" value="0" name="" class="visota"></td>
      </tr>
      <tr class="kvadratura-tr" style="display:none">
        <td>Квадратура в*ш</td>
        <td><strong class="kvadratura"></strong></td>
      </tr>
      <tr>
        <td><label><input type="checkbox" name="" class="ucet-uglov">С учетом сборки</label></td>
        <td><input type="number" min="0" value="0" name="" class="ucet-uglov-input" disabled cena0=""></td>
      </tr>
      <tr class="cena-pm-tr" style="display:none">
        <td>Итого цена за сборку </td>
        <td><strong class="cena-pm"></strong></td>
      </tr>
      <tr>
        <td>Итого <span class="itogo-calc">0 грн.</span></td>
      </tr>
    </table>
  </div>
  <script type='text/javascript' src='calc.js'></script>
  </p>
</body>

</html>

И ещё, можно ли, по нажатию на чекбокс, чтобы прибавляло 150 грн. (только без поля, просто чекбокс и всё)?

Может кто поможет что с кодом не так ? Ссылка на Codepen

Answer 1

$('.itogo-calc').html(+glass+shirina*visota*ucet_uglov+' грн.');
                      ^

БЛОГ НА HUSL

Не корректно выводятся данные в калькуляторе

Ответы (1 шт):