Реализация мини калькулятора

241

16 января 2017, 21:58

Народ, помогите пожалуйста реализовать мини калькуляцию, есть 1 селект со списком машин и 2 инпута типа number где нужно задать часы и км, при выборе всего что нужно и вводе данных в инпуты подсчет происходит таким образом: определенная машина из списка определенная цена за час умножается на кол-во часов(из 1-го инпута) + так же определенная машина из списка определенная цена за км умножается на кол-во км(из 2-го инпута), код ниже, но что то он не пашет у меня)

function calculate(carPrice) { 
  var cars = { 
    'Toyota Camry 40': 2500, 
    'Toyota Camry R4': 3300, 
    'KIA Optima': 3000 
  }; 
 
  var oneKm = { 
    'Toyota Camry 40': 51, 
    'Toyota Camry R4': 41, 
    'KIA Optima': 47 
  }; 
 
 
  $('#hour').blur(function() { 
    var cl = $('#hour').val; 
    var Km = $('#distance').val; 
    console.log(Km); 
    var total = cars[carPrice.value] * cl + Km * oneKm[carPrice.value]; 
    if (!isNaN(total)) { 
      $('#total').text(total); 
    } 
  }); 
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<form> 
  <select id="brand" onclick="calculate(this)"> 
    <option value="Toyota Camry 40">Toyota Camry 40</option> 
    <option value="Toyota Camry R4">Toyota Camry R4</option> 
    <option value="KIA Optima">KIA Optima</option> 
  </select> 
 
  <input type="number" id="hour" min="1" max="500" placeholder="Предположительное время аренды (ч)" step="1" /> 
 
  <input type="number" id="distance" min="1" max="500" placeholder="Предположительное расстояние (км)" step="1" /> 
 
</form> 
<div class="total">Сумма <span id="total"></span> 
</div>

Answer 1

var cars = { 
  'Toyota Camry 40': 2500, 
  'Toyota Camry R4': 3300, 
  'KIA Optima': 3000 
}; 
 
var oneKm = { 
  'Toyota Camry 40': 51, 
  'Toyota Camry R4': 41, 
  'KIA Optima': 47 
}; 
$("#brand").change(foo); 
$('#hour').change(foo); 
$('#distance').change(foo) 
 
function foo() { 
  var cl = $('#hour').val(); 
  var Km = $('#distance').val(); 
  var car = $("#brand option:selected").val(); 
  var total = cars[car] * cl + Km * oneKm[car]; 
  if (!isNaN(total)) { 
    $('#total').text(total); 
  } 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<form> 
  <select id="brand"> 
    <option value="Toyota Camry 40">Toyota Camry 40</option> 
    <option value="Toyota Camry R4">Toyota Camry R4</option> 
    <option value="KIA Optima">KIA Optima</option> 
  </select> 
 
  <input type="number" id="hour" min="1" max="500" placeholder="Предположительное время аренды (ч)" step="1" /> 
 
  <input type="number" id="distance" min="1" max="500" placeholder="Предположительное расстояние (км)" step="1" /> 
 
</form> 
<div class="total">Сумма <span id="total"></span> 
</div>

Answer 2

  var cars = { 
'Toyota Camry 40': 2500, 
'Toyota Camry R4': 3300, 
'KIA Optima': 3000 
  }; 
 
  var oneKm = { 
'Toyota Camry 40': 51, 
'Toyota Camry R4': 41, 
'KIA Optima': 47 
  }; 
 
 
$(document).ready(function(){ 
$("form").on("change", function(){ 
var cl = $('#hour').val(); 
var Km = $('#distance').val(); 
var car = $('#brand').val(); 
var total = cars[car] * cl + Km * oneKm[car]; 
if (!isNaN(total)) { 
  $('#total').text(total); 
} 
}); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<form> 
<select id="brand"> 
<option value="Toyota Camry 40">Toyota Camry 40</option> 
<option value="Toyota Camry R4">Toyota Camry R4</option> 
<option value="KIA Optima">KIA Optima</option> 
</select> 
 
<input type="number" id="hour" min="1" max="500" placeholder="Предположительное время аренды (ч)" step="1" /> 
 
<input type="number" id="distance" min="1" max="500" placeholder="Предположительное расстояние (км)" step="1" /> 
 
</form> 
<div class="total">Сумма <span id="total"></span> 
</div>

Answer 3

Первое: cars и oneKm ограничены областью видимости функции calculate. Вложенная функция об этих массивах может и не знать. Если вы вызываете вложенную функцию раньше родительской. Второе: чтобы передать в массив данные их надо сначала вытащить. Например так: $("#brand").val(); Третье: мало объявить функцию, надо ещё её вызвать. Вложенная функция сама по себе не сработает. Её надо вынести или вызывать родительскую функцию событием, а уже внутри делать вызов вложенной. Ну и мой вариант кода:

    var cars = {
    'Toyota Camry 40': 2500,
    'Toyota Camry R4': 3300,
    'KIA Optima': 3000
  };
  var oneKm = {
    'Toyota Camry 40': 51,
    'Toyota Camry R4': 41,
    'KIA Optima': 47
  };
 $('#hour').blur(function() {
    var cl = $('#hour').val();
    var Km = $('#distance').val();
    var carPrice = $("#brand").val();
    var total = cars[carPrice] * cl + Km * oneKm[carPrice];
    if (!isNaN(total)) {
      $('#total').text(total);      
    }
  });

Ссылочка на поиграться: http://codepen.io/Ssssory/pen/WRGdyZ

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

JQuery скрипт начинает работать только после перезагрузки страницы

Есть код который размещен в body:

605

jQuery

jQuery. Как передать элемент в setTimeout

Подписываюсь на событие click для всех кнопок с классом btnНужно, чтобы при клике нажатая кнопка становилась неактивной, а через 3 секунды становилась...

307

jQuery

Защита лайков от накрутки, localStorage

Возникла небольшая проблемаНиже приведен скрипт, который обрабатывает клик на кнопку лайк и затем создает объект в localStorage + делает кнопку...

310

jQuery

Плавная смена background-image

Как сделать плавную смену картинок фона? Есть вот такой скрипт, но там смена происходит не плавно

1338