Hello, there was a problem, I found a code on the internet where the data from the preces come from, but I need to make it take the data from select> option, because the product has different volumes because of this different price, how to do it ... Say, is very necessary

js script

var prices = { 1: 450, 5: 430, 50: 410 } var pricesDiv = document.getElementById('prices'), countInput = document.getElementById('count'), summarySpan = document.getElementById('summary'), priceSpan = document.getElementById('price'); // for (i in prices) { // var div = document.createElement('div'); // div.innerHTML = i + ' шт. — ' + prices[i] + '₽' // pricesDiv.appendChild(div); // } function calculate() { var val = parseInt(this.value) || 0 var multiplier; for (i in prices) { if (val < i) { if (multiplier === undefined) { multiplier = prices[i]; } break; } multiplier = prices[i]; } summarySpan.innerHTML = val * multiplier priceSpan.innerHTML = multiplier } countInput.addEventListener('keyup', calculate); countInput.addEventListener('mouseup', calculate); 
 <select name="main-col" class="form-control sel"> <option value="0" selected>Выберите </option> <option value="Цена: 1100р." >1.2</option> <option value="Цена: 1200р." >1.5</option> <option value="Цена: 1400р." >1.7</option> </select> <div id="prices"> </div> <div> <div> Количество товаров: </div> <div> <input id="count" type="number"> </div> </div> <div> Итого: <span id="summary">0</span> </div> <div> Цена за шт.: <span id="price">0</span> </div>

    1 answer 1

     var pricesDiv = document.getElementById('prices'), countInput = document.getElementById('count'), summarySpan = document.getElementById('summary'), priceSpan = document.getElementById('price'); discount = document.getElementById('discount'); function foo() { var selectedItem = document.getElementById("mySelect").value; document.getElementById("price").innerHTML = selectedItem; } function calculate() { var val = parseInt(document.getElementById('price').innerHTML); var x = parseInt(countInput.value); if (x >= 5 && x < 49) { summarySpan.innerHTML = (val * x) - (x * 100); discount.innerHTML = "Скидка: " + (x * 100); } else if (x > 50) { summarySpan.innerHTML = (val * x) - (x * 200); discount.innerHTML = "Скидка: " + (x * 200); } else { summarySpan.innerHTML = val * x; } } countInput.addEventListener('keyup', calculate); 
     <select name="main-col" id="mySelect" class="form-control sel" onchange="foo()"> <option value="0" selected>Выберите</option> <option value="1100р.">1.2</option> <option value="1200р.">1.5</option> <option value="1400р.">1.7</option> </select> <div id="prices"></div> <div> <div>Количество товаров:</div> <div> <input id="count" type="number"> </div> </div> <div>Итого: <span id="summary">0</span> </div> <div>Цена за шт.: <span id="price">0</span> </div> <span id="discount"></span>

    • Thanks, the code works correctly, but how to make it so that when the order quantity is 10 the price decreases in each case by 100 rubles? - kirilly228
    • @ kirilly228 mean, discount on a certain% if ordered> 10? - C.Raf.T
    • Yes, if the amount of 5-49 price decreased by 9 percent, and if 50-150 decreased by 18%, just started to study js, strong problems - kirilly228
    • @ kirilly228 changed .. - C.Raf.T
    • I probably got you, but at the moment I need you more air, ah ... I'm a little confused, there is a price with a volume of 1.2 = 1100, with 1.5 = 1000, and with 1.7 = 1000 (they are marked in select) and with 5-49, their price becomes less exactly by 100 rubles, and at 50-149 their price becomes less by 200 rubles exactly, if you help me I will be wildly grateful))) - kirilly228