Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Скрипт для калькулятора (https://javascript.ru/forum/misc/70758-skript-dlya-kalkulyatora.html)

Леонид777 01.10.2017 00:28

razmer1=1(белый)
razmer1=2(красный, серебро, ярко-синий, желтый, бежевый)

razmer2=1(белый)
razmer2=2(красный, серебро, ярко-синий, желтый, бежевый)

razmer3=1(белый)

razmer4=1(белый)
razmer4=2(золотой, бежевый, бордовый)

razmer5=1(белый)
razmer5=2(черный, синий, желтый)

razmer6=1(белый)
razmer6=2(черный, синий)

razmer5=1(белый)
razmer5=2(черный)

j0hnik 01.10.2017 01:02

var tirazh = document.querySelector("#tirazh"),
		razmer = document.querySelector("#razmer"),
		nanesenie = document.querySelector("#nanesenie"),
		cvet = document.querySelector("#cvet"),
		summ = 0;

		document.querySelector("button").onclick=function(){
			if (tirazh.value == '1' && razmer.value  == 'size1' && nanesenie.value  == '1' && cvet.value == 'белый') summ = 500;
			else if (tirazh.value == '1' && razmer.value  == 'size1' && nanesenie.value  == '2' && cvet.value == 'белый') summ = 600;
			//итд
			document.querySelector("#result").textContent = summ;
		};

laimas 01.10.2017 01:44

Цитата:

Сообщение от j0hnik
else if (tirazh.value == '1' && razmer.value == 'size1' && nanesenie.value == '3') summ = 700;
//итд

Офигеть.

Rasy 01.10.2017 03:54

Леонид777,
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>;</title>
</head>
<body>
  <div class="genius-calculator">
    <select id="tirazh">
      <option selected></option>
      <option value="1">100шт</option>
      <option value="2">200шт</option>
      <option value="3">300шт</option>
      <option value="4">400шт</option>
      <option value="5">500шт</option>
      <option value="6">600шт</option>
      <option value="7">700шт</option>
      <option value="8">800шт</option>
      <option value="9">900шт</option>
      <option value="10">1000шт</option>
      <option value="11">1500шт</option>
      <option value="12">2000шт</option>
    </select>
    - Тираж;
    <br />
    <br />

    <select id="razmer">
      <option  selected></option>
      <option value="size1">22,5 x 34см</option>
      <option value="size2">30 x 40см</option>
      <option value="size3">36 x 45см</option>
      <option value="size4">38 x 50см</option>
      <option value="size5">45 x 50см</option>
      <option value="size6">60 x 50см</option>
      <option value="size7">70 x 50см</option>
    </select>
    - Размер пакета;
    <br />
    <br />

    <select id="cvet"></select>
    - Цвет пакета;
    <br />
    <br />

    <select id="nanesenie">
      <option selected></option>
      <option value="1">1 + 0</option>
      <option value="2">2 + 0</option>
      <option value="3">3 + 0</option>
      <option value="4">4 + 0</option>
    </select>
    - Количество цветов нанесения;
    <br />
    <br />

    <button>Рассчитать!</button>

    <div style="font-weight:bold" id="result"></div>
  </div>
  <script>
    
    (function(window, document) {
      
        var genius_calc = function(parent) {
          parent = document.querySelector(parent);
          if (!parent) return;
          // сделал вручной ввод, чтобы тс поработал
          var amazing_inputs = [
            '100,22,5x34,белый,2+0',
            '200,30x40,белый,2+0'
          ];
          // не хотел делать объектами
          var assoc_prices = ['500','800'];
          var sizes = ['22,5x34', '30x40'];
          var assoc_colors = ['белый,черный', 'красный,белый,синий'];
          var re = /[\s|см|шт]/g; // воскресная лень

          return {
            init: function() {
              parent.addEventListener('click', this.calculate.bind(this));
              parent.addEventListener('change', this.fillColors.bind(this));
            },
            fillColors: function(e) {
              var sel = document.getElementById('cvet');
              if (!sel) return;
              if (e.target.tagName == 'SELECT' && e.target.id == 'razmer') {
                var opt = e.target.options.selectedIndex;
                opt = e.target.options[opt];
                var val = opt.textContent.replace(re, '');
                var f = this.find(val, sizes);
                if (sel && sel.firstElementChild) {
                  while (sel.firstElementChild) {
                    sel.removeChild(sel.firstElementChild);
                  }
                }
                if (typeof(f) == 'number') {
                  var s = assoc_colors[f];

                  if (sel) {
                    s.split(',').forEach(function(v) {
                      var option = document.createElement('option');
                      option.textContent = v;
                      sel.appendChild(option);
                    });
                  }

                }
              }
            },
            collect: function(e) {
              var selects = parent.querySelectorAll('select');
              var arr = [];

              [].forEach.call(selects, function(select, indx) {
                var opt = select.options.selectedIndex;
                opt = select.options[opt];
                if (opt)
                  arr.push(opt.textContent.replace(re, '').toLowerCase());
              });

              return arr.join(',');
            },
            find: function(str, variable) {
              var indx = variable.indexOf(str);
              if (~indx) return indx;
              return false;
            },
            dump: function(n) {
              document.getElementById('result').textContent = assoc_prices[n];
            },
            calculate: function(e) {
              if (e.target.tagName == 'BUTTON') {
                var c = this.collect();
                var f = this.find(c, amazing_inputs);
                if (typeof(f) == 'number')
                  this.dump(f);
              }
            }
          };

        };
        var gc = genius_calc('.genius-calculator');
        gc.init();

    })(window, document);

  </script>
</body>
</html>

Леонид777 01.10.2017 15:30

Ребят, спасибо Вам за помощь!!! Огромное спасибо)))

Леонид777 01.10.2017 16:37

Цитата:

Сообщение от Rasy (Сообщение 466124)
Леонид777,
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>;</title>
</head>
<body>
  <div class="genius-calculator">
    <select id="tirazh">
      <option selected></option>
      <option value="1">100шт</option>
      <option value="2">200шт</option>
      <option value="3">300шт</option>
      <option value="4">400шт</option>
      <option value="5">500шт</option>
      <option value="6">600шт</option>
      <option value="7">700шт</option>
      <option value="8">800шт</option>
      <option value="9">900шт</option>
      <option value="10">1000шт</option>
      <option value="11">1500шт</option>
      <option value="12">2000шт</option>
    </select>
    - Тираж;
    <br />
    <br />

    <select id="razmer">
      <option  selected></option>
      <option value="size1">22,5 x 34см</option>
      <option value="size2">30 x 40см</option>
      <option value="size3">36 x 45см</option>
      <option value="size4">38 x 50см</option>
      <option value="size5">45 x 50см</option>
      <option value="size6">60 x 50см</option>
      <option value="size7">70 x 50см</option>
    </select>
    - Размер пакета;
    <br />
    <br />

    <select id="cvet"></select>
    - Цвет пакета;
    <br />
    <br />

    <select id="nanesenie">
      <option selected></option>
      <option value="1">1 + 0</option>
      <option value="2">2 + 0</option>
      <option value="3">3 + 0</option>
      <option value="4">4 + 0</option>
    </select>
    - Количество цветов нанесения;
    <br />
    <br />

    <button>Рассчитать!</button>

    <div style="font-weight:bold" id="result"></div>
  </div>
  <script>
    
    (function(window, document) {
      
        var genius_calc = function(parent) {
          parent = document.querySelector(parent);
          if (!parent) return;
          // сделал вручной ввод, чтобы тс поработал
          var amazing_inputs = [
            '100,22,5x34,белый,2+0',
            '200,30x40,белый,2+0'
          ];
          // не хотел делать объектами
          var assoc_prices = ['500','800'];
          var sizes = ['22,5x34', '30x40'];
          var assoc_colors = ['белый,черный', 'красный,белый,синий'];
          var re = /[\s|см|шт]/g; // воскресная лень

          return {
            init: function() {
              parent.addEventListener('click', this.calculate.bind(this));
              parent.addEventListener('change', this.fillColors.bind(this));
            },
            fillColors: function(e) {
              var sel = document.getElementById('cvet');
              if (!sel) return;
              if (e.target.tagName == 'SELECT' && e.target.id == 'razmer') {
                var opt = e.target.options.selectedIndex;
                opt = e.target.options[opt];
                var val = opt.textContent.replace(re, '');
                var f = this.find(val, sizes);
                if (sel && sel.firstElementChild) {
                  while (sel.firstElementChild) {
                    sel.removeChild(sel.firstElementChild);
                  }
                }
                if (typeof(f) == 'number') {
                  var s = assoc_colors[f];

                  if (sel) {
                    s.split(',').forEach(function(v) {
                      var option = document.createElement('option');
                      option.textContent = v;
                      sel.appendChild(option);
                    });
                  }

                }
              }
            },
            collect: function(e) {
              var selects = parent.querySelectorAll('select');
              var arr = [];

              [].forEach.call(selects, function(select, indx) {
                var opt = select.options.selectedIndex;
                opt = select.options[opt];
                if (opt)
                  arr.push(opt.textContent.replace(re, '').toLowerCase());
              });

              return arr.join(',');
            },
            find: function(str, variable) {
              var indx = variable.indexOf(str);
              if (~indx) return indx;
              return false;
            },
            dump: function(n) {
              document.getElementById('result').textContent = assoc_prices[n];
            },
            calculate: function(e) {
              if (e.target.tagName == 'BUTTON') {
                var c = this.collect();
                var f = this.find(c, amazing_inputs);
                if (typeof(f) == 'number')
                  this.dump(f);
              }
            }
          };

        };
        var gc = genius_calc('.genius-calculator');
        gc.init();

    })(window, document);

  </script>
</body>
</html>




Извиняюсь за наглость...
При подстановке, допустим, красного цвета расчет не производится.

var amazing_inputs = [

'100,22,5x34,белый,1+0',

'200,22,5x34,белый,1+0',

'300,22,5x34,белый,1+0',

'400,22,5x34,белый,1+0',

'500,22,5x34,белый,1+0',

'600,22,5x34,белый,1+0',

'700,22,5x34,белый,1+0',

'800,22,5x34,белый,1+0',

'900,22,5x34,белый,1+0',

'1000,22,5x34,белый,1+0',

'1500,22,5x34,белый,1+0',

'2000,22,5x34,белый,1+0',

'100,22,5x34,красный,1+0',

'200,22,5x34,красный,1+0',

'300,22,5x34,красный,1+0',



];

// не хотел делать объектами

var assoc_prices = ['1500руб','2510руб','3470руб','4280руб ','4720руб','5480руб','6230руб','6990ру б','7740руб','8500руб','12490руб','16490 руб','520руб','780руб','960руб'];

var sizes = ['22,5x34', '30x40', '36x45', '38x50', '45x50', '60x50', '70x50'];

var assoc_colors = ['белый,красный,серебро,ярко-синий,желтый,бежевый', 'белый,красный,серебро,ярко-синий,желтый,бежевый', 'белый', 'белый,золотой,бежевый,борд овый', 'белый,черный,синий,желтый', 'белый,черный,синий', 'белый,черный'];

var re = /[\s|см|шт]/g; // воскресная лень

Rasy 01.10.2017 16:46

Леонид777,
x - латиницей прописан?

Леонид777 01.10.2017 16:54

Да, латиницей

Rasy 01.10.2017 16:54

Леонид777,
Замени 78 строку
var re = /\s|см$|шт$/g;

Леонид777 01.10.2017 17:02

Все ок.
А сгруппировать цвета?

'100,22,5x34,белый,1+0',

'200,22,5x34,белый,1+0',

'100,22,5x34,красный,серебро,ярк -синий,желтый,бежевый,1+0',


Часовой пояс GMT +3, время: 02:40.