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

Thanks. I see that you have a bunch of var states for insert 1/5 in/out/up/down, and separate buttons for left right corner center. You will need to place the information in those var statements into the value attribute of each button.

I did just two to get the code working. I could add all the other information at my leisure. But none of it would work without getting the code working.

I see that one button has a value of “1_Out_Up,-1,1,0.7,0.7,1-corner.png,0” and the only other button has a value of “d-mount”.

Addition is not possible in that circumstance.

I guess I erred in not add all the code to all the buttons. I was only working on the C mount tab first.

Let me know when we’re ready to go with something that’s suitable to be used.

I presume that only one button from each section (C and D) can be selected at a time?

Only one button from c, then one from d, then the four numbers will be added and displayed in Results.

Because the buttons contain images, using a page event listener won’t be as easy, so instead I’m selecting each buttonC and buttonD element and am using scripting to add the same event handler on to them.

function buttonClickHandler(evt) {
    evt.preventDefault();
    processButton(button);
}
const buttons = document.querySelectorAll(".buttonC, .buttonD");
buttons.forEach(function (button) {
    button.addEventListener("click", buttonClickHandler);
});

The processButton function that I’m starting with is:

const zeroValues = "none,0,0,0,0";
let cMount = zeroValues;
let dMount = zeroValues;
function processButton(button) {
    const values = button.value.split(",");
    console.log(values);
    // update either cMount or dMount
    // add them together
}

The plan is to update the cMount and dMount variables, so that other code can then add them together and update the web page.

To update cMount or dMount when a button is clicked, we need to know if the clicked button is in the C or the D section. It’s bad to add classnames on to each button just for that identification, so a different technique must be used to add each event listener. Instead of using buttonC, I’m going to use “.grid-container” which is already in the HTML code.

const buttons = document.querySelectorAll(".grid-container button");
buttons.forEach(function (button) {
    button.addEventListener("click", buttonClickHandler);
});

Because the button contains other elements (such as an image) we need to ensure that we correctly get the button element when an event is triggered. We can use a while loop to step up through parent elements to achieve that.

function buttonClickHandler(evt) {
    evt.preventDefault();
    let el = evt.target;
    while (el && el.nodeName !== "BUTTON") {
        el = el.parentNode;
    }
    processButton(el);
}

It always helps to have infinite loop protection so checking if we have an element first before checking for other things helps to protect us if a button isn’t found. If we end up going up to the body and html parents we’ll eventually get null as a parent, letting us break out of the loop.

We can now check for which C or D section we’re in and assign to either cMount or dMount, and before that a bit of protection against buttons without enough values occurs too, so that addition can still take place in safety.

function getValues(buttonValue) {
    if (buttonValue.split(",").length > 4) {
        return buttonValue.split(",").slice(1, 5);
    }
    return zeroValues;
}
function assignValues(button) {
    const values = getValues(button.value);
    if (button.parentNode.classList.contains("grid-divc")) {
        cMount = values;
    }
    if (button.parentNode.classList.contains("grid-divd")) {
        dMount = values;
    }
}
function processButton(button) {
    assignValues(button);
    console.log({cMount, dMount});
    // add them together
}

And then we can add them together.

function addButtons(cMount, dMount) {
    const added = cMount.map(function addTogether(value, index) {
        return Number(value) + Number(dMount[index]);
    });
    return added;
}
function processButton(button) {
    assignValues(button);
    const added = addButtons(cMount, dMount);
}

And lastly update the results panel.

function updateResults(added) {
    document.querySelector("#toe").innerHTML = added[0];
    document.querySelector("#antisquat").innerHTML = added[1];
    document.querySelector("#pWidth").innerHTML = added[2];
    document.querySelector("#pHeight").innerHTML = added[3];
}
function processButton(button) {
    assignValues(button);
    const added = addButtons(cMount, dMount);
    updateResults(added);
}

The complete scripting code that we have for adding these buttons together is:

const zeroValues = [0, 0, 0, 0];
let cMount = zeroValues;
let dMount = zeroValues;
function getValues(buttonValue) {
    if (buttonValue.split(",").length > 4) {
        return buttonValue.split(",").slice(1, 5);
    }
    return zeroValues;
}
function assignValues(button) {
    const values = getValues(button.value);
    if (button.parentNode.classList.contains("grid-divc")) {
        cMount = values;
    }
    if (button.parentNode.classList.contains("grid-divd")) {
        dMount = values;
    }
}
function addButtons(cMount, dMount) {
    const added = cMount.map(function addTogether(value, index) {
        return Number(value) + Number(dMount[index]);
    });
    return added;
}
function updateResults(added) {
    document.querySelector("#toe").innerHTML = added[0];
    document.querySelector("#antisquat").innerHTML = added[1];
    document.querySelector("#pWidth").innerHTML = added[2];
    document.querySelector("#pHeight").innerHTML = added[3];
}
function processButton(button) {
    assignValues(button);
    const added = addButtons(cMount, dMount);
    updateResults(added);
}
function buttonClickHandler(evt) {
    evt.preventDefault();
    let el = evt.target;
    while (el && el.nodeName !== "BUTTON") {
        el = el.parentNode;
    }
    processButton(el);
}
var buttons = document.querySelectorAll(".grid-container button");
buttons.forEach(function (button) {
     button.addEventListener("click", buttonClickHandler, false);
});
1 Like

Right now I’ve got the HUGEST smile ever!
I’m eager to work on this … will do so when I get back to work. I’ll post it in the same place. Wow! Many thanks!

I added your code, but I am getting 0 0 0 0 no matter which 2 buttons I press.

You guys went WAY further than I expected. I’ll bet you had fun!

But one thing that is extra: +3 will always be added to the first number (after they are added together) and 1 will always be added to the second pair’s sum.

Sum should be:
cmount[0] + dmount[0] + 3 = X
cmount[1] + dmount[1] + 1 = Y

The [2] and [3] are correct.

Let me have fun figuring this out and I’ll cry Uncle if I get in over my head.

Mostly I aimed to keep each stage as simple as practical, with easy ways at each step to check if successful progress is being made.

OK, no matter what buttons I click, the values are always 0,0,0,0 on the results page and in console.log.

I made a change to adjust the sum of two numbers (this was originally supposed to be there as part of the calculations):

function updateResults(added) {
    document.querySelector("#toe").innerHTML = added[0] **+ 3;**
    document.querySelector("#antisquat").innerHTML = added[1] **+ 1;**

With these additions, the output is 3,1,0,0. But the 3 and 1 were supposed to be added to the other numbers.

I notice that your explanations for the code and the link grouping of the code are in different orders. Does it matter which order the code is in this case?

Just wondering if that is why the numbers are not being added up.

Your code was this, which assumed I had 5 values:

   if (buttonValue.split(",").length > 4) {
        return buttonValue.split(",").slice(1, 5);

I changed it to this, since I now have 4 values, the numbers themselves. Is this OK?

    if (buttonValue.split(",").length > 4) {
        return buttonValue.split(",").slice(0, 4);

Sample button looks like:
<div class="grid-divc" id="ca1"><button value="-1,1,0.7,0.7"><img title="-1,1,0.7,0.7" alt="-1,1,0.7,0.7" class="buttonC" src="images/1-corner.png"></button></div>

I was using the values from your code, which come from the following on your page:

	var insertCenter = ["center", "0", "0", "0", "0"];
	var insert1_In = ["1_In", "1", "0", "-0.7", "0"];
	var insert1_Out = ["1_Out", "-1", "0", "0.7", "0"];
	var insert1_Up = ["1_Up", "0", "1", "0", "0.7"];
	var insert1_Down = ["1_Down", "0", "-1", "0", "-0.7"];
	var insert1_In_Up = ["1_In_Up", "1", "1", "0.7", "0.7"];
	var insert1_In_Down = ["1_In_Down", "1", "-1", "-0.7", "-0.7"];
	var insert1_Out_Up = ["1_Out_Up", "-1", "1", "0.7", "0.7"];
	var insert1_Out_Down = ["1_Out_Down", "-1", "1", "-0.7", "-0.7"];
	var insert5_In = ["5_In", "0.5", "0", "-0.35", "0"];
	var insert5_Out = ["5_Out", "-0.5", "0", "0.35", "0"];
	var insert5_Up = ["5_Up", "0", "0.5", "0", "0.35"];
	var insert5_Down = ["5_Down", "0", "-0.5", "0", "-0.35"];
	var insert5_In_Up = ["5_In_Up", "0.5", "0.5", "-0.35", "0.35"];
	var insert5_In_Down = ["5_In_Down", "0.5", "-0.5", "-0.35", "-0.35"];
	var insert5_Out_Up = ["5_Out_Up", "-0.5", "0.5", "0.35", "0.35"];
	var insert5_Out_Down = ["5_Out_Down", "-0.5", "-0.5", "0.35", "-0.35"];
	var insert1_In_5_Up = ["1_In_5_Up", "1", "0.5", "-0.7", "0.35"];
	var insert1_In_5_Down = ["1_In_5_Down", "1", "-0.5", "-0.7", "-0.35"];
	var insert1_Out_5_Up = ["1_Out_5_Up", "-1", "0.5", "0.7", "0.35"];
	var insert1_Out_5_Down = ["1_Out_5_Down", "-1", "-0.5", "0.7", "-0.35"];
	var insert5_In_1_Up = ["5_In_1 Up", "0.5", "1", "-0.35", "0.7"];
	var insert5_In_1_Down = ["5_In_1_Down", "0.5", "-1", "-0.35", "-0.7"];
	var insert5_Out_1_Up = ["5_Out_1_Up", "-0.5", "1", "0.35", "0.7"];
	var insert5_Out_1_Down = ["5_Out_1_Down", "-0.5", "-1", "0.35", "-0.7"];

If you are not going to be using that type of structure for your values, then different code clearly is needed.
I must go for the day, but will return to take you through things step by step in 24 hours.

Once I added that info back in, it started working just fine! Thank you very much! Please don’t do any more work on this for now.

I am going to show at the top of the tab’s container the insert that was chosen. I’m perplexed as to why this doesn’t show the insert in the span.

In your function, I grabbed the string values in order to repeat them elsewhere in the tab container. That part works.

function assignValues(button) {
    const values = getValues(button.value);
    if (button.parentNode.classList.contains("grid-divc")) {
        cMount = values;
        document.getElementById('cInsertChosen').innerHTML = cMount;
        document.getElementById('cResults').innerHTML = cMount;
    }

Then I attempted to grab the values and put it in cMount and run an if statement to see which insert it matches. If it matches the top left insert, then I want to display that insert at the top of the tab container as well as its matching pair (every insert has a matching pair.) The chosen inserts should display in the Results tab container, too.

function assignValues(button) {
    const values = getValues(button.value);
    if (button.parentNode.classList.contains("grid-divc")) {
        cMount = values;
        document.getElementById('cInsertChosen').innerHTML = cMount;
        document.getElementById('cResults').innerHTML = cMount;
            if (cMount === "-1,1,0.7,0.7") {   
                var leftImg = 1-corner.png;
                var rightImg = 1-corner.png; 
                document.getElementById("cMountLeft").innerHTML = "<img src='images/" + leftImg + "' class='cMountLeftImg'>";
                document.getElementById("cMountRight").innerHTML = "<img src='images/" + rightImg + "' class='cMountRightImg transform1'>";
                document.getElementById("cResultsLeft").innerHTML = "<img src='images/" + leftImg + "' class='cMountLeftImg'>";
                document.getElementById("cResultsRight").innerHTML = "<img src='images/" + rightImg + "' class='cMountRightImg transform1'>";
                document.getElementById("dMountLeft").innerHTML = "<img src='images/" + leftImg + "' class='dMountLeftImg'>";
                document.getElementById("dMountRight").innerHTML = "<img src='images/" + rightImg + "' class='dMountRightImg transform1'>";
                document.getElementById("dResultsLeft").innerHTML = "<img src='images/" + leftImg + "' class='dMountLeftImg'>";
                document.getElementById("dResultsRight").innerHTML = "<img src='images/" + rightImg + "' class='dMountRightImg transform1'>"; 
            }
    }

I need to do this for all the buttons in the right two tabs. But there are no images being displayed. No output on the clicks in the console.

<p style="height: 2em"><strong>C Mount</strong> 
				<br><span id="cInsertChosen"></span><span id="cMountLeft"></span><span id="cMountRight"></span></p>

Can you please supply a test page so that we can use the debugger to investigate things more thoroughly.

Hi Paul,
Here’s a link:

http://www.reedyrace.com/ae/runtime/testing-buttons.html

Where your trouble is happening is that the values variable is not a string. It’s an array that contains the separate values instead.

So i need to concatenate the values to build the cMount. Got it.