How do I add button values when the buttons have an array of values?

JavaScript
1

I have 25 buttons. Each button has 4 values. When the user clicks on two buttons, then the corresponding values are added together.

One button might be values:
insert1_In = ["1", "0", "-0.7", "0"];

A second button might be values:
insert1_In_5_Up = ["1", "0.5", "-0.7", "0.35"];

I would need to add:

var a = insert1_In;
var b = insert1_In_5_Up;
var c0 = a[0] + b [0];
var c1 = a[1] + b [1];
var c2 = a[2] + b [2];
var c3 = a[3] + b [3];

Then I would use innerHTML to display the value on the page.

How do I grab the value of a < button > and attach it to the proper array of values so I can add them together? I might be going about this the wrong way.

2

The map method letā€™s us have a resulting array at the end:

var a = insert1_In;
var b = insert1_In_5_Up;
var result = a.map(function addTogether(aItem, index) {
    const bItem = b[index];
    return Number(aItem) + Number(bItem);
});
console.log(result); // [1, 0.5, -1.4, 0.35]

And you now have an array of the added values.

3

This is really helpful for the coding work later on! But itā€™s not addressing the issue Iā€™m having.

How do I map each button to a variable so that when they tap a button, my code will access the right 4 values to add? Every button has a different ID and set of variables.

If I made a select list, then it is easy, because the list has one name/ID and the variable name will be in the item selected. If there were only two buttons, then the two are ready to add together because there are only two IDs. But how do you do it with 25 unrelated buttons where every button has its own ID?

In my code on this page, I have var a = insert1_In, but it could be 24 other names because there are 25 buttons involved, not 2.

I hope this makes my problem clearer. Each button doesnā€™t stand for one number but 4.

4

What determines which of the 4 possible answers for a single button to display?

5

Slight correction:
console.log(result); // [2, 0.5, -1.4, 0.35]

6

Each button has all 4 values. in code they might look like an array (if thatā€™s the best way to show them).

There are 2 sets of 25 buttons for an engineer to tap, tap a button in one set, then tap on in the other. The engineer needs to press one button in each set.

Each button returns 4 values. The four values for each button are added together, seta[0] + setb[0], seta[1] + setb[1], and so on, to get all four measurements, which are then displayed.

If you look at JS calculators, each button retrieves only one value. How do I get a button to return all four values so I can add them up?

7

It would be a lot easier to understand if you had some HTML code of the layout.
This is only a guess, but you might be able to modify it to your needs.

I turned ā€˜Paul_Wilkinsā€™ answer into a function rather than direct execution
and I abbreviated you array names because I am such a poor typist ā€¦
The code might be compressed further with more comprehensive understanding of your needs.

See if this of any help. :slight_smile:

<!DOCTYPE html><html lang="en"><head><title> Array Additions </title>
<meta charset="UTF-8">
<meta name="viewport" content="width-device-width,initial-scale=1.0, user-scalable=yes"/>
<!-- From: https://www.sitepoint.com/community/t/how-do-i-add-button-values-when-the-buttons-have-an-array-of-values/351566/5 -->

<style>
 html { box-sizing: border-box; }
 *, *:before, *:after { box-sizing: inherit; }

 fieldset { display: flex; flex-wrap: wrap; }
 span { flex: 1 0 25%; }
</style>

</head><body>

<fieldset> <legend>Addition</legend>
 <span><button onclick="msg('btn0', answers(a, b))">Answers</button> <pre id="btn0"></pre></span>
 <span><button onclick="msg('btn1', answers(b, c))">Answers</button> <pre id="btn1"></pre></span>
 <span><button onclick="msg('btn2', answers(c, d))">Answers</button> <pre id="btn2"></pre></span>
 <span><button onclick="msg('btn3', answers(d, e))">Answers</button> <pre id="btn3"></pre></span>

 <span><button onclick="msg('btn4', answers(a, c))">Answers</button> <pre id="btn4"></pre></span>
 <span><button onclick="msg('btn5', answers(b, d))">Answers</button> <pre id="btn5"></pre></span>
 <span><button onclick="msg('btn6', answers(c, e))">Answers</button> <pre id="btn6"></pre></span>
 <span><button onclick="msg('btn7', answers(d, a))">Answers</button> <pre id="btn7"></pre></span>
</fieldset>

<script>
const doc = (IDS) => document.getElementById(IDS);
const msg = (IDS, ...message) => doc(IDS).innerHTML += message.join(' ');
console.clear();

a = ["1", "0",   "-0.7", "0"];
b = ["1", "0.5", "-0.7", "0.35"];
c = ["2", "0.5", "-1.4", "0.35"];
d = ["3", "1",   "-2.1", "0.7"];
e = ["6", "1.5", "-3.5", "1.05"];

  function answers(a,b) {
    var result = a.map(function addTogether(aItem, index) {
      const bItem = b[index];
      return (Number(aItem) + Number(bItem)).toFixed(2);
    });
    return `${[...a]} \n${[...b]} \n${[...result]}`;
  }

</script>

</body></html>
8

There are several ways of doing this. Can you please give us a better idea about how people will use the page? As that can give us a better way of choosing an approach thatā€™s more suitable to to the intended usage.

9

Each button has all 4 values. in code they might look like an array (if thatā€™s the best way to show them).

There are 2 sets of 25 buttons for an engineer to tap, tap a button in one set, then tap on in the other. The engineer needs to press one button in each set.

Each button returns 4 values. The four values for each button are added together, seta[0] + setb[0], seta[1] + setb[1], and so on, to get all four measurements, which are then displayed.

If you look at JS calculators, each button retrieves only one value. How do I get a button to return all four values so I can add them up?

10

You can put them in the value attribute, potentially comma-separated so that when JavaScript retrieves those values, it can easily split them up.

11

So Iā€™ll make 25 event listeners, one for each button. One will be tapped. Somehow I grab that particular response, then the same with the 2nd setā€™s button.

12

Instead of 25 different event listeners you can have a single event listener on the page, and give each button a suitable class name. When that page event listener triggers on a click, it can check if the element has the correct class name and pass that element to a function to deal with the button being clicked.

13

Ah, that is a more logical way to do it. Iā€™ll try this out when I get back to work Monday.

14

Sample code is:

function processButton(button) {
    const values = button.value.split(",");
    // do something with button values
}
function pageClickHandler(evt) {
    var targ = evt.target;
    if (targ.classList.contains("multivalue")) {
        processButton(targ);
    }
}
document.addEventListener("click", pageClickHandler);
15

I am missing something. Nothing displays in the innerHTML.

<span id="setcReturn"></span>

<button class="buttonC" value="1_Out,-1,0,0.7,0,1-corner.png,0"><img src="images/1-corner.png"></button>

 <script>
function processButton(button) {
    const values = button.value.split(",");
	document.getElementById("setcReturn").innerHTML = res[0];
}
function pageClickHandler(evt) {
    var targ = evt.target;
    if (targ.classList.contains("buttonC")) {
        processButton(targ);
    }
}
document.addEventListener("click", pageClickHandler);
</script>

I suspect values[0] is wrong.

16

There are 2 sets of 25 buttons each. I need to process each set separately, so I cannot use ā€œbutton.ā€ I suspect Iā€™ll eventually need to replace
const btn = document.querySelector('button');
with
const btnC = document.getElementsByClass('buttonC');

17

Can you please supply some example HTML code of the buttons, so that I may more effectively test the JavaScript code with them.

18

The first one has all the data in it. The others do not, but will have similar data. Tomorrow I can post it online without my company stuff if you like.

<div class="grid-divc" id="ca1"><button class="buttonC" value="1_Out_Up,-1,1,0.7,0.7,1-corner.png,0"><img src="[images/1-corner.png](https://www.reedyrace.com/ae/runtime/images/1-corner.png)"></button></div>

<div class="grid-divc" id="ca2"><button value=""><img src="[images/1-5-Lcorner.png](https://www.reedyrace.com/ae/runtime/images/1-5-Lcorner.png)"></button></div>

<div class="grid-divc" id="ca3"><button value=""><img src="[images/1-center.png](https://www.reedyrace.com/ae/runtime/images/1-center.png)"></button></div>

<div class="grid-divc" id="ca4"><button value=""><img src="[images/1-5-Rcorner.png](https://www.reedyrace.com/ae/runtime/images/1-5-Rcorner.png)"></button></div>

<div class="grid-divc" id="ca5"><button value=""><img src="[images/1-corner.png](https://www.reedyrace.com/ae/runtime/images/1-corner.png)" style="transform: rotate(90deg);"></button></div>
19

yes okay, that will be handy.

20

http://www.reedyrace.com/ae/runtime/buttton-array.html
Here it is online.