Doing math off of CMS values?

Hello,

I’m trying to figure out how to get access to multiple values with the same elements inside of a Webflow page.

I have this playground: https://altonwells.webflow.io/playground

What I would like to do, is be able to do the math on the values inside of the collection items. For example, i’d like to take all of the numbers inside of the CMS items and do their sum.

I’m capable of writing the math in javascript so once I gain access to the numbers I should be able to do something. The only idea I have is to build an array from all the elements with id=“numbers” but I’m not entirely sure how to do that.

Plz help <3


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Hi @Wells,

It seems your .numbers elements are already in the .playground_test array (grid):

 sumjq = function(selector) {
    var sum = 0;
    $(selector).each(function() {
        sum += Number($(this).text());
    });
    return sum;
}

console.log(sumjq('.number'));

This jquery will give you the sum of all the values of your .numbers items.

Hope this helps…

Best

Hey @Blaise_Posmyouck

I really appreciate this. It’s very helpful.

I was able to also inject some Javascript into each div where i assign the cms value to a variable called numberValue. Does that make things “easier”?

Ideally i’d like to be able to be able to assign all of the values to an empty array that I could iterate upon.

And/or do that for each type of shape (i.e. triangle/square)

Cheers mate, thanks again.

I’m also having a bit of trouble understanding how once I have that number, that i’m able to inject it back into the DOM.

The idea that I have is to be able to take the current selection of numbers on the screen and manipulate that number and redisplay a modulated value.