Калькулятор для сайта эвакуатора

Пытаюсь реализовать простой HTML-калькулятор для сайта эвакуатора, с выпадающими списками, полем ввода расстояния и динамическим расчётом стоимости.


✅ HTML + JS Калькулятор для эвакуатора

<div style="max-width: 500px; font-family: Arial; padding: 20px; border: 1px solid #ccc; border-radius: 10px;">
  <h2>Калькулятор стоимости эвакуации</h2>

  <label>Тип транспортного средства:</label>
  <select id="vehicleType" onchange="calculatePrice()">
    <option value="3000">Мотоциклы, снегоходы, квадроциклы</option>
    <option value="3500">Легковые автомобили до 1,5 тонн</option>
    <option value="4000">Легковые автомобили от 1,5 до 2 тонн</option>
    <option value="4500">Минивэны, кроссоверы от 2 до 2,5 тонн</option>
    <option value="5000">Джипы, внедорожники, минивэны от 2,5 до 3 тонн</option>
    <option value="5500">Микроавтобусы (Газель) до 3,5 тонн</option>
  </select>

  <br><br>
  <label>Место подачи:</label>
  <select id="pickupPlace" onchange="calculatePrice()">
    <option value="0">В пределах Москвы</option>
    <option value="1000">За пределами Москвы</option>
  </select>

  <br><br>
  <label>Месторасположение выгрузки:</label>
  <select id="dropPlace" onchange="calculatePrice()">
    <option value="0">В пределах МКАД</option>
    <option value="1000">За пределами МКАД</option>
  </select>

  <br><br>
  <label>Расстояние от погрузки до выгрузки (км):</label><br>
  <input type="number" id="distance" value="100" onchange="calculatePrice()" style="width: 100px;" min="0"> км

  <br><br>
  <h3>Итоговая стоимость: <span id="totalPrice">от 3000</span> руб.</h3>
</div>

<script>
  function calculatePrice() {
    const vehiclePrice = parseInt(document.getElementById('vehicleType').value);
    const pickupExtra = parseInt(document.getElementById('pickupPlace').value);
    const dropExtra = parseInt(document.getElementById('dropPlace').value);
    const distance = parseInt(document.getElementById('distance').value) || 0;

    const baseDistance = 10;
    const pricePerKm = 40;

    let extraDistance = Math.max(0, distance - baseDistance);
    let distanceCost = extraDistance * pricePerKm;

    const total = vehiclePrice + pickupExtra + dropExtra + distanceCost;

    document.getElementById('totalPrice').innerText = `от ${total}`;
  }

  window.onload = calculatePrice;
</script>

? Примечания:

  • Цены условные, их можно изменить в атрибутах value внутри <option>.
  • Скрипт считает базовую цену за авто + доплату за подачу и выгрузку + 40 ₽ за каждый км свыше 10 км.

В чем проблема? Пытаюсь реализовать следующее, необходимо увеличить тариф за каждый км на 10 руб, если расстояние превышает 100км добавлять за каждый км свыше 100 + 10 руб. Понимаю, что просить готовое решение неприемлемо, возможно знаете примеры как это можно реализовать похожий функционал?


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