It is necessary to implement a calculator that calculates the total purchase price and changes this value online when adding / removing a unit of goods through +/-. Calculator He himself was able to realize only the initial price derivation, which does not react to any changes.

<div class="popup-2 mfp-hide"> <div class="popup__container"> <h1 class="h1__catalog h1__catalog_popup2">Соберите свой набор</h1> <div class="block--top block--top_popup2"><img class="box-pic" src="img/box.png" alt=""/> <div class="select__wrap select__wrap_popup2"><span class="bold">Продукт</span> <select class="choice-candy"> <option>Фруктово-ореховые сладости</option> <option>Бананы в шоколаде</option> <option>Клубника в шоколаде</option> <option>Черешня в шоколаде</option> </select><span class="bold margin-top-22">Размер</span> <select class="size"> <option>15 штук</option> <option>15 штук</option> <option>15 штук</option> </select> <div class="block__candy-price">Стоимость одной конфеты:<br> <span class="bold">50 рублей</span></div> </div> </div> <div class="block--middle"> <ul class="catalog__assortiment"> <li class="catalog__assortiment__item catalog__assortiment__item_popup2 margin-bottom-23"><img src="img/for_catalog.png" alt=""/> <div class="choice_wrap"><span>Турин</span> <div class="number_candy"><span class="minus">-</span> <input id="val" type="text" value="1" size="5"/><span class="plus">+</span> </div> </div> </li> <li class="catalog__assortiment__item catalog__assortiment__item_popup2 margin-bottom-23"><img src="img/for_catalog.png" alt=""/> <div class="choice_wrap"><span>Мятный</span> <div class="number_candy"><span class="minus">-</span> <input id="val" type="text" value="1" size="5"/><span class="plus">+ </span> </div> </div> </li> <li class="catalog__assortiment__item catalog__assortiment__item_popup2 margin-bottom-23"><img src="img/for_catalog.png" alt=""/> <div class="choice_wrap"><span>Семечки </span> <div class="number_candy"><span class="minus">-</span> <input id="val" type="text" value="1" size="5"/><span class="plus">+ </span> </div> </div> </li> <li class="catalog__assortiment__item catalog__assortiment__item_popup2 margin-bottom-23"><img src="img/for_catalog.png" alt=""/> <div class="choice_wrap"><span>Пур Пур </span> <div class="number_candy"><span class="minus">-</span> <input id="val" type="text" value="1" size="5"/><span class="plus">+</span> </div> </div> </li> <li class="catalog__assortiment__item catalog__assortiment__item_popup2 margin-bottom-23"><img src="img/for_catalog.png" alt=""/> <div class="choice_wrap"><span>Мромор</span> <div class="number_candy"><span class="minus">-</span> <input id="val" type="text" value="1" size="5"/><span class="plus">+ </span> </div> </div> </li> <li class="catalog__assortiment__item catalog__assortiment__item_popup2 margin-bottom-23"><img src="img/for_catalog.png" alt=""/> <div class="choice_wrap"><span>Банан</span> <div class="number_candy"><span class="minus">-</span> <input id="val" type="text" value="1" size="5"/><span class="plus">+</span> </div> </div> </li> <li class="catalog__assortiment__item catalog__assortiment__item_popup2 margin-bottom-23"><img src="img/for_catalog.png" alt=""/> <div class="choice_wrap"><span>Мускатный </span> <div class="number_candy"><span class="minus">-</span> <input id="val" type="text" value="1" size="5"/><span class="plus">+</span> </div> </div> </li> <li class="catalog__assortiment__item catalog__assortiment__item_popup2 margin-bottom-23"><img src="img/for_catalog.png" alt=""/> <div class="choice_wrap"><span>К кофе </span> <div class="number_candy"><span class="minus">-</span> <input id="val" type="text" value="1" size="5"/><span class="plus">+</span> </div> </div> </li> <li class="catalog__assortiment__item catalog__assortiment__item_popup2 margin-bottom-23"><img src="img/for_catalog.png" alt=""/> <div class="choice_wrap"><span>Трюфель</span> <div class="number_candy"><span class="minus">-</span> <input id="val" type="text" value="1" size="5"/><span class="plus">+</span> </div> </div> </li> <li class="catalog__assortiment__item catalog__assortiment__item_popup2 margin-bottom-23"><img src="img/for_catalog.png" alt=""/> <div class="choice_wrap"><span>Ореховый </span> <div class="number_candy"><span class="minus">-</span> <input id="val" type="text" value="1" size="5"/><span class="plus">+</span> </div> </div> </li> <li class="catalog__assortiment__item catalog__assortiment__item_popup2 margin-bottom-23"><img src="img/for_catalog.png" alt=""/> <div class="choice_wrap"><span>Орандж </span> <div class="number_candy"><span class="minus">-</span> <input id="val" type="text" value="1" size="5"/><span class="plus">+</span> </div> </div> </li> <li class="catalog__assortiment__item catalog__assortiment__item_popup2 margin-bottom-23"><img src="img/for_catalog.png" alt=""/> <div class="choice_wrap"><span>Грецкий мак </span> <div class="number_candy"><span class="minus">-</span> <input id="val" type="text" value="1" size="5"/><span class="plus">+</span> </div> </div> </li> <li class="catalog__assortiment__item catalog__assortiment__item_popup2 margin-bottom-23"><img src="img/for_catalog.png" alt=""/> <div class="choice_wrap"><span>Золотой </span> <div class="number_candy"><span class="minus">-</span> <input id="val" type="text" value="1" size="5"/><span class="plus">+</span> </div> </div> </li> <li class="catalog__assortiment__item catalog__assortiment__item_popup2 margin-bottom-23"><img src="img/for_catalog.png" alt=""/> <div class="choice_wrap"><span>Миндаль </span> <div class="number_candy"><span class="minus">-</span> <input id="val" type="text" value="1" size="5"/><span class="plus">+</span> </div> </div> </li> <li class="catalog__assortiment__item catalog__assortiment__item_popup2 margin-bottom-23"><img src="img/for_catalog.png" alt=""/> <div class="choice_wrap"><span>Бронзовый </span> <div class="number_candy"><span class="minus">-</span> <input id="val" type="text" value="1" size="5"/><span class="plus">+ </span> </div> </div> </li> </ul> <div class="end_price">Итоговая стоимость: <span id="allPrice">0 </span><span>&#160 рублей </span></div> </div> <div class="block__order-form"> <form class="form-order form-order-popup2"> <label>Имя <input type="text"/> </label> <label>Телефон <input type="tel"/> </label> <input class="order-btn" type="submit" value="оформить заказ"/> </form> </div> </div> </div> $(document).ready(function() { $('.minus').click(function () { var $input = $(this).parent().find('input'); var count = parseInt($input.val()) - 1; count = count < 1 ? 0 : count; $input.val(count); $input.change(); return false; }); $('.plus').click(function () { var $input = $(this).parent().find('input'); $input.val(parseInt($input.val()) + 1); $input.change(); return false; }); var result = document.getElementById("allPrice"); result.innerHTML= parseInt(document.getElementById("val").value*15*50); });
  • Vanguey, is there some common CMS - can it be easier to find a module? - Dan the Hat
  • No, the site is self-written .. It is necessary to implement it on js via jquery - Alexey_Danilov
  • one
    you are important when the data is sent to the server do not forget to recalculate the cost there again - teran
  • Dig in the direction of functions in JS and w3 schools will help you. - user1448914

0