People, please help to realize a mini costing, there is 1 select with a list of cars and 2 input lines of type where you need to set the clock and km, when you select everything you need and the data is entered in the input, the counting takes place in this way: a certain machine from the list will be multiplied per hour on the number of hours (from the 1st input) + also a certain machine from the list; a certain price per km is multiplied by the number of km (from the 2nd input), the code is lower, but that it does not plow me)

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>

  • Please make your code executable and separate JavaScript from HTML. - Vadim Ovchinnikov
  • answer helped ???? - L. Vadim

3 answers 3

 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> 

      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>

      First: cars and oneKm are limited to the function scope calculate. The nested function may not be aware of these arrays. If you call a nested function before the parent. Second: to transfer data to the array, you must first pull them out. For example, $("#brand").val(); Third: it’s not enough to declare a function, you still have to call it. The nested function will not work by itself. It must be taken out or the parent function is called an event, and inside it the call must be made nested. Well, my version of the code:

        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); } });

      A link to play: http://codepen.io/Ssssory/pen/WRGdyZ

      • Mmm ... yes. And one more cant. the amount is recalculated only when the focus of the first input is lost. if you change the contents of the second, then nothing changes. Well, I think the solution here is obvious. - Ssssory