Setting text-block value dynamically

I have a cms field populated by a number(rent). I have another cms field with holds security deposit period(also a number, ex: 2, 3). I want to fetch these two text-blocks, multiply them and populate a 3rd field: total security deposit.

Can someone help me with the js required? Would be very grateful!


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

I like the easy ones. Here you go :wink:

 var deposit = rent * period;

As far as fetching the rent and period and populating the deposit, it totally depends on your page design. Want to share a read-only link?

https://preview.webflow.com/preview/zerojhanjhat?utm_medium=preview_link&utm_source=designer&utm_content=zerojhanjhat&preview=2b6b3e9d654bdbe437be0d7f77446566&pageId=6331618eca257d41922071ce&itemId=6331618eca257d097e20727c&workflow=preview

Yeah help me with fetching rent and period and populating deposit.

It looks like you’ve set this up so that this calculation only needs to occur once on this page, so I’d assign ID’s to each element, so that the contents easily identifiable by your script.

e.g. give your Rent element an ID of rent-amount, your Period element an ID of deposit-period and your Deposit element an ID of deposit-amount.

image

Once you have those, you can reference them in your script;

<script>
$(function() {
  
  const rent = $("#rent-amount").text();
  const period = $("#deposit-period").text();
  const deposit = rent * period;
  $("#deposit-amount").html(deposit);
  
});
</script>

To make this work you’re going to want to split your Deposit Period into parts, so that the value accessible is in its own element. The same way you’ve done for Rent Amount and Deposit Period, put that value by itself and assign the deposit-period ID there. Otherwise you’re trying to multiply by a non-numeric text string e.g. “2 Months” which won’t work.

Here’s a codepen showing how this works.

When you’ve separated that element properly, and ID’d them, you can place this in your before /body custom code area of the page.

Thank You for guidance. Works as intented.