I liked your approach to the OPs problem.
It finally made sense to me what the project’s purpose was about.
With that improved understanding, I created the follow TEST program
using the function (modified slightly) to create a simplified button calculator.
Nothing more than my attempt to understand the problem and incorporate 'fengxh’s interesting function.
<!DOCTYPE html><html lang="en"><head><title> Button Array Calculator </title>
<meta charset="UTF-8">
<meta name="viewport" content="width-device-width,initial-scale=1.0, user-scalable=yes"/>
<!--
Idea from: https://www.sitepoint.com/community/t/how-do-i-add-button-values-when-the-buttons-have-an-array-of-values/351566/45
-->
<style>
legend { font-size: 1.5em; background-color: yellow; }
button { width: 8em; font-size: 1.2em; }
.add { background: lime; }
.sub { background: pink; }
.mul { background: cyan; }
.div { background: orange; }
</style>
</head><body>
<fieldset id="btnTable"><legend>Button Array Calculator</legend>
<button class="add" data-array="1,2,3,4">Add: 1,2,3,4</button>
<button class="add" data-array="4,3,2,1">Add: 4,3,2,1</button>
<button class="add" data-array="1,1,1,1">Add: 1,1,1,1</button>
<button class="add" data-array="2,2,2,2">Add: 2,2,2,2</button><br>
<button class="sub" data-array="1,2,3,4">Sub: 1,2,3,4</button>
<button class="sub" data-array="4,3,2,1">Sub: 4,3,2,1</button>
<button class="sub" data-array="1,1,1,1">Sub: 1,1,1,1</button>
<button class="sub" data-array="2,2,2,2">Sub: 2,2,2,2</button><br>
<button class="mul" data-array="1,2,3,4">Mul: 1,2,3,4</button>
<button class="mul" data-array="4,3,2,1">Mul: 4,3,2,1</button>
<button class="mul" data-array="2,2,2,2">Mul: 2,2,2,2</button>
<button class="mul" data-array="3,3,3,3">Mul: 3,3,3,3</button><br>
<button class="div" data-array="1,2,3,4">Div: 1,2,3,4</button>
<button class="div" data-array="4,3,2,1">Div: 4,3,2,1</button>
<button class="div" data-array="2,2,2,2">Div: 2,2,2,2</button>
<button class="div" data-array="3,3,3,3">Div: 3,3,3,3</button>
</fieldset>
<button onclick="console.log('current results: ',accumulatorStr)">Results</button>
<button onclick="accumulatorStr='0,0,0,0';clrBtn()">Clear results</button>
<pre id='demo'></pre>
<script>
const doc = (IDS) => document.getElementById(IDS);
var former = console.log; // retain former actions of console.log
console.log = function(...msg){
former(...msg); // maintains existing logging via the console. (optional)
doc("demo").append(msg.join(' ')+'\n'); // output needs to be specified
}
console.clear();
function btnClear(el) { while (el.firstChild) el.removeChild(el.firstChild); }
function clrBtn() { btnClear(doc('demo')); }
var accumulatorStr = '0,0,0,0'; // running calculations
function calculateButtonArray(event) {
const previousString = accumulatorStr;
const currButton = event.target || window.event.srcElement;
const currString = currButton.getAttribute("data-array");
var accumulator = [0,0,0,0]; // combineArray(currString.split(","), previousString.split(","));
switch (event.className) {
case 'add': accumulator = addArrays(currString.split(","), previousString.split(",")); break;
case 'sub': accumulator = subArrays(currString.split(","), previousString.split(",")); break;
case 'mul': accumulator = mulArrays(currString.split(","), previousString.split(",")); break;
case 'div': accumulator = divArrays(currString.split(","), previousString.split(",")); break;
}
accumulatorStr = accumulator.join(','); // return accumulator;
return accumulatorStr;
}
// different mathematical processes on button arrays
function addArrays(arrB, arrA) { return arrA.map( (a, index) => Number(a) + Number(arrB[index]) ); }
function subArrays(arrB, arrA) { return arrA.map( (a, index) => Number(a) - Number(arrB[index]) ); }
function mulArrays(arrB, arrA) { return arrA.map( (a, index) => Number(a) * Number(arrB[index]) ); }
// avoid division by zero (0) at this time -- causes errors -- add checks
function divArrays(arrB, arrA) { return arrA.map( (a, index) => Number(a) / Number(arrB[index]) ); }
//function sumem(elem) { console.log(calculateButtonArray(elem).join(',')); } // returned numbers
function sumem(elem) { console.log(calculateButtonArray(elem)); } // for returned strings
function init() {
var btns = document.querySelectorAll('#btnTable button');
btns.forEach( function (elem) { elem.addEventListener( 'click', function () { sumem(elem) } ) } );
} init();
</script>
</body></html>