I want to get the data from each dragged item once it has been dropped and add it to an array. I am relatively new to Javascript so I'm unsure how I can achieve this. I want 'data' added to the 'total' array each time an item is dropped, this is what I have so far:
function dropHandler(ev) {
ev.preventDefault();
const totalBalance = [];
var data = ev.dataTransfer.getData("text");
var dropTarget = document.getElementById('drop-target');
ev.target.appendChild(document.getElementById(data));
// changes colour of drop target when dragged over
ev.currentTarget.style.background = "black";
totalText = document.getElementById('totalText');
totalText.innerHTML = totalBalance
}
With the list you have created, you can simply just push new values into it with push(value), this inserts the given value into the list.
let totalBalance = []; // Table to track all of the balances.
function dropHandler(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
var dropTarget = document.getElementById('drop-target');
ev.target.appendChild(document.getElementById(data));
// changes colour of drop target when dragged over
ev.currentTarget.style.background = "black";
// Insert this data into our total balance's list.
totalBalance.push(data);
totalText = document.getElementById('totalText');
totalText.innerHTML = totalBalance
}
The totalBalance list is defined before the function definition so it is not overwritten every time something is dropped.