Hello, I am interested in this question, for example, I have 4 fields, 2 of them, from where we transfer objects and 2 where we actually add (Thanks a lot to Grundy). It is necessary to perform the operations of addition and subtraction of numbers that are in the tags <p></p> , I tried to implement this code with all the options:
var sum = 0; var text = document.getElementsByClassName('itemprice'); addTrade.call(this, items, dest); $(this).children('p').attr("class", "itemprice"); for (var i = 0; i < text.length; i++) { sum += Number(text[i].innerHTML); } console.log('Итого', sum); document.getElementById('button').innerHTML = 'Итого: ' + sum; But in the end it turned out only one-sided addition and subtraction, that is, when we click on an item in the yellow field, there is an addition, when we click on it in orange - there is a subtraction, but it is necessary that when transferring from the top yellow block to the top orange, the addition goes to the total the sum, and transferring from the lower yellow block to the lower orange one, was deducted from this sum from the total sum, and transferring everything back to yellow, naturally everything is the other way around. + so that the initial amount is equal to the number in another block, here is an example:
var useritems = []; var botitems = []; function addTrade(items, dest) { if (items.length < 10) { items.push($(this).attr('data-id')); $(this).appendTo(dest); } } function removetrade(items, dest) { items.splice(items.indexOf($(this).attr('data-id')), 1); $(this).appendTo(dest); } function addRemoveInit(items, src, dest) { $(src).on('click', '.item', function() { addTrade.call(this, items, dest); }); $(dest).on('click', '.item', function() { removetrade.call(this, items, src); }); } addRemoveInit(useritems, '.inventoryload', '.tradehave'); addRemoveInit(botitems, '.botinventoryload', '.tradewant'); function tradesend() { if (useritems.length > 0) { var data_post = reduceItems(botitems, 'h', reduceItems(useritems, 'w', {})); console.log(data_post); } } function reduceItems(items, prefix, start) { return items.reduce(function(acc, el, index) { acc[prefix + (index + 1)] = el; return acc; }, start); } .inventoryload { background: yellow; border: 1px solid; height: 140px; width: 150px; } .botinventoryload { background: yellow; border: 1px solid; height: 140px; width: 150px; } .tradewant { background: orange; border: 1px solid; height: 140px; width: 150px; } .tradehave { background: orange; border: 1px solid; height: 140px; width: 150px; } .inv { float: left; } .trade { float: left; } .balance { width: 302px; height: 20px; background: green; text-align: center; border: 1px solid; margin: 0; } .price { width: 302px; text-align: center; background: pink; border: 1px solid;} .item { background: white; border: 1px solid; height: 40px; width: 40px; margin: 2px;} li {display: block;} <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <p class="balance">Баланс: <span>322</span></p> <div class="inv"> <div class="inventoryload"> <li class="item" data-id="1111"><p>2141</p></li> <li class="item" data-id="1251"><p>212</p></li> <li class="item" data-id="4444"><p>4574</p></li> </div> <div class="botinventoryload"> <li class="item" data-id="3251"><p>11</p></li> <li class="item" data-id="8018"><p>175</p></li> <li class="item" data-id="6543"><p>653</p></li> </div> </div> <div class="trade"> <div class="tradehave"> </div> <div class="tradewant"> </div> </div> <div id="info" style="float:left; width: 199px; padding-left: 10px"> Тут при переносе элемента из желтого в оранжевое поле должно быть прибавление числа в нем к общей сумме "Итого:", при обратном, должно быть отнимание числа от общей суммы <br>---------------------<br> Тут при переносе из желтого в оранжевое поле должно быть отнимание числа в нем от общей суммы "Итого:", при переносе обратно, должно быть прибавление числа к общей сумме <br>---------------------<br> "Итого:" + "Баланс:" </div> <p class="price">Итого: <span>322</span></p> <button onClick="tradesend();" id="button">Обменять</button> 
