БЛОГ НА HUSL


Как сделать калькулятор расчета стоимости

Автор вопроса: Слава Грачев

Помогите сделать калькулятор. Зачёркнутая цена  +10% от той что в таблице Например диаметр трубы 73 диаметр лопасти 200 длинна 1500 цена выходит 1450 - 10%

Не доходит пока как подставлять сумму в переменную "num"

введите сюда описание изображения

введите сюда описание изображения

let total = document.getElementById('total');
let diameter = document.getElementById('diameter');
let diameterTwo = document.getElementById('diameterTwo');
let length = document.getElementById('length');

diameter.addEventListener('change', function () {
});

let sale = 10;
let type = diameter.value;
let argumentOne = diameterTwo.value;
let argumentTwo = length.value;

let num = 1750;

let proc = sale * num/100
let sum = num - proc;
total.value = sum + ' ₽';


let saleNum = document.querySelector('.form__sale');
saleNum.innerHTML = num + ' ₽';
<form class="form" name="order" action="#" method="POST">
  <div class="form__item form__item_select">
    <label class="form__select-label" for="diameter"><i></i> диаметр трубы:</label>
    <div class="form__select">
      <svg class="form__select-icon" width="16" height="16" viewbox="0 0 8 8">
                          <path d="M5 7.5L0.669874 0.75L9.33013 0.749999L5 7.5Z" fill="black"></path>
                        </svg>
      <select id="diameter" name="diameter">
        <option value="1">73 мм</option>
        <option value="1">73 мм</option>
        <option value="2">89 мм</option>
      </select>
    </div>
  </div><span class="form__indent"></span>
  <div class="form__item form__item_select">
    <label class="form__select-label" for="diameterTwo"><i></i> диаметр лопасти:</label>
    <div class="form__select">
      <svg class="form__select-icon" width="16" height="16" viewbox="0 0 8 8">
                          <path d="M5 7.5L0.669874 0.75L9.33013 0.749999L5 7.5Z" fill="black"></path>
                        </svg>
      <select id="diameterTwo" name="diameterTwo">
        <option value="200">200 мм</option>
        <option value="200">200 мм</option>
        <option value="250">250 мм</option>
        <option value="300">300 мм</option>
        <option value="350">350 мм</option>
      </select>
    </div>
  </div><span class="form__indent"></span>
  <div class="form__item form__item_select">
    <label class="form__select-label" for="length"><i></i> длина трубы:</label>
    <div class="form__select">
      <svg class="form__select-icon" width="16" height="16" viewbox="0 0 8 8">
                          <path d="M5 7.5L0.669874 0.75L9.33013 0.749999L5 7.5Z" fill="black"></path>
                        </svg>
      <select id="length" name="length">
        <option value="1500">1500</option>
        <option value="1500">1500</option>
        <option value="2000">2000</option>
        <option value="2500">2500</option>
        <option value="3000">3000</option>
        <option value="3500">3500</option>
        <option value="4000">4000</option>
      </select>
    </div>
  </div><span class="form__indent form__indent_last"></span>
  <div class="form__item">
    <label class="form__label" for="total">Цена:</label>
    <input class="form__input" id="total" type="text" name="total"><span class="form__sale"></span>
  </div>
  <button class="form__btn btn" type="submit" name="submit" data-type="primary">Заказать</button>
</form>


Источник

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

Автор решения: UModeL

Самый простой вариант - это объект с именами ключей совпадающими со значениями в выпадающих списках. Также это легко будет переделать под JSON (если данные всё же не статические), задав объекту нужную структуру и дополнив функцию проверками.

const data = {
  73:{
    200:{1500:1450,2000:1650,2500:2000,3000:2150,3500:2350,4000:2600},
    250:{1500:1550,2000:1750,2500:2100,3000:2250,3500:2450,4000:2700},
    300:{1500:1650,2000:1850,2500:2200,3000:2350,3500:2550,4000:2800},
    350:{1500:1750,2000:1950,2500:2300,3000:2450,3500:2650,4000:2900}
  },
  89:{
    200:{1500:1550,2000:1900,2500:2250,3000:2600,3500:2900,4000:3350},
    250:{1500:1650,2000:2000,2500:2350,3000:2650,3500:2950,4000:3400},
    300:{1500:1750,2000:2100,2500:2450,3000:2800,3500:3100,4000:3500},
    350:{1500:1850,2000:2200,2500:2550,3000:2850,3500:3150,4000:3600}
  }
};

let sale = 10;

let diameter = document.getElementById("diameter");
let diameterTwo = document.getElementById("diameterTwo");
let length = document.getElementById("length");
let total = document.getElementById("total");
let saleNum = document.querySelector(".form__sale");

function calc() {
  let sum = data[diameter.value][diameterTwo.value][length.value];
  total.value = sum + " ₽";
  saleNum.innerHTML = sum + (sum / 100 * sale) + " ₽";
}
document.querySelector("form").addEventListener("change", calc);
calc();
<form class="form" name="order" action="#" method="POST">
  <div class="form__item form__item_select">
    <label class="form__select-label" for="diameter"><i></i> диаметр трубы:</label>
    <div class="form__select">
      <svg class="form__select-icon" width="16" height="16" viewbox="0 0 8 8">
        <path d="M5 7.5L0.669874 0.75L9.33013 0.749999L5 7.5Z" fill="black"></path>
      </svg>
      <select id="diameter" name="diameter">
        <option value="73">73 мм</option>
        <option value="73">73 мм</option>
        <option value="89">89 мм</option>
      </select>
    </div>
  </div><span class="form__indent"></span>
  <div class="form__item form__item_select">
    <label class="form__select-label" for="diameterTwo"><i></i> диаметр лопасти:</label>
    <div class="form__select">
      <svg class="form__select-icon" width="16" height="16" viewbox="0 0 8 8">
        <path d="M5 7.5L0.669874 0.75L9.33013 0.749999L5 7.5Z" fill="black"></path>
      </svg>
      <select id="diameterTwo" name="diameterTwo">
        <option value="200">200 мм</option>
        <option value="200">200 мм</option>
        <option value="250">250 мм</option>
        <option value="300">300 мм</option>
        <option value="350">350 мм</option>
      </select>
    </div>
  </div><span class="form__indent"></span>
  <div class="form__item form__item_select">
    <label class="form__select-label" for="length"><i></i> длина трубы:</label>
    <div class="form__select">
      <svg class="form__select-icon" width="16" height="16" viewbox="0 0 8 8">
        <path d="M5 7.5L0.669874 0.75L9.33013 0.749999L5 7.5Z" fill="black"></path>
      </svg>
      <select id="length" name="length">
        <option value="1500">1500</option>
        <option value="1500">1500</option>
        <option value="2000">2000</option>
        <option value="2500">2500</option>
        <option value="3000">3000</option>
        <option value="3500">3500</option>
        <option value="4000">4000</option>
      </select>
    </div>
  </div><span class="form__indent form__indent_last"></span>
  <div class="form__item">
    <label class="form__label" for="total">Цена:</label>
    <input class="form__input" id="total" type="text" name="total"><span class="form__sale"></span>
  </div>
  <button class="form__btn btn" type="submit" name="submit" data-type="primary">Заказать</button>
</form>

→ Ссылка

licensed under cc by-sa 3.0 with attribution.