Подсчитать сумму заказа исходя из цены и количества в каждом поле

224

18 мая 2018, 10:00

Уважаемые знатоки, помогите пожалуйста разобраться. Бьюсь уже пол дня, не могу добиться чтобы при увеличении количества в поле input автоматически количество перемножалось на цену и выводило результат.

window.onload = function () { 
  var myDiv = document.getElementById('myDiv'); 
  var inp; 
  myDiv.onclick = function (e) { 
    e = e || event 
    var target = e.target || e.srcElement; 
    if (target.value == '+') { 
      inp = target.previousSibling.previousSibling; 
      if (parseInt(inp.value) < 5) { 
        inp.value = parseInt(inp.value) + 1;		 
      } 
    } else if (target.value == '-') { 
      inp = target.nextSibling.nextSibling; 
      if (parseInt(inp.value) > 1) { 
        inp.value = parseInt(inp.value) - 1; 
      } 
    }	  
 var znachenie = document.getElementById('inp').value; 
 var prise = document.getElementById('price').textContent; 
 var totalPriceProduct = prise * znachenie; 
 document.getElementById('total_price').innerHTML = totalPriceProduct; 
 document.getElementById('total_price_post').value = totalPriceProduct; 
  } 
}

<div id="myDiv"> 
<p><span id="price">500</span> грн. 
<input type="button" value="-"> 
<input type="text" id="inp" size="1" value="1"> 
<input type="button" value="+"> 
<span id="total_price">500</span> 
<input id="total_price_post" type="text" value="500"></p> 
<p><span id="price">500</span> грн. 
<input type="button" value="-"> 
<input type="text" id="inp" size="1" value="1"> 
<input type="button" value="+"> 
<span class="total_price">500</span> 
<input type="text" value="500"></p> 
<p><span id="price">500</span> грн. 
<input type="button" value="-"> 
<input type="text" id="inp" size="1" value="1"> 
<input type="button" value="+"> 
<span class="total_price">500</span> 
<input type="text" value="500"></p> 
</div> 
<div class="summa_result"></div>

Answer 1

Можно сделать подсчёт, основываясь на вёрстке, но это сильно неправильно - чуть изменить и всё полетит.
Лучше сделать базу в JS, а при вводе передавать только маркер ID товара:

// База знаний; тут уже можно гораздо больше ставить, нежели просто цена 
let db = [ 
  { 
    cost: 500 
  }, 
  { 
    cost: 111 
  }, 
  { 
    cost: 894 
  } 
]; 
 
// Простенький делегатор 
document.querySelector('table').addEventListener('input', function(e){ 
  let el = document.activeElement; 
  if(el.nodeName === 'INPUT' && el.classList.contains('amountInput')) recalculate.call(el); 
}); 
 
function recalculate() { 
  let id = +this.dataset.purchase; 
  if(!db[id]) return; 
   
  let parent = this.closest('.item'); // Общий предок 
  let cost = db[id].cost; // Получаем цену по ID 
   
  parent.querySelector('.calcResult').innerHTML = +this.value * cost; // Перемножаем и вставляем в последнюю ячейку 
}

input[type="number"] { 
   width: 50px; 
}

<table> 
  <tr> 
    <th>Стоимость</th> 
    <th>Количество</th> 
    <th>Итого</th> 
  </tr> 
  <tr class='item'> 
    <td>500 гавриков</td> 
    <td><input type='number' value='0' data-purchase='0' class='amountInput' /></td> 
    <td class='calcResult'>0</td> 
  </tr> 
  <tr class='item'> 
    <td>111 гавриков</td> 
    <td><input type='number' value='0' data-purchase='1' class='amountInput' /></td> 
    <td class='calcResult'>0</td> 
  </tr> 
  <tr class='item'> 
    <td>894 гавриков</td> 
    <td><input type='number' value='0' data-purchase='2' class='amountInput' /></td> 
    <td class='calcResult'>0</td> 
  </tr> 
</table>