Калькулятор для сайта эвакуатора
Пытаюсь реализовать простой 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 руб. Понимаю, что просить готовое решение неприемлемо, возможно знаете примеры как это можно реализовать похожий функционал?