Adding values live mode

Ask the community
,
1

Hi everyone,

I am trying to display input1 + input2 + input3 = input4. But i need that when one of input values changed, input4 updates automaticly without refresh. Sort of like calculator.
I am using this code. but its not working. Any advice?

$w('#totalPoints').value = (Number($w('#input6').value) + Number($w('#input7').value) + Number($w('#input8').value) + Number($w('#input9').value) + Number($w('#input10').value));

Thank you!

@J. D. @Ahmad

2

first of all, I don’t see a reason to have 'totalPoints" as input element. The user doesn’t input anything there. It makes more sense to have it as a plain text element.
Anyway, before you assign a value, convert the sum to string.

  • make sure there;re no undefined values in the input fields.
3

Maybe consider having something like this.

const inputs = ['#input6', '#input78', '#input6'];
$w(inputs.join(",")).onInput(event => {
let values = [];
inputs.forEach(e => $w(e).value &&= values.push($w(e).value));
const sum = values.reduce((a,c) => Number(a) + Number(c));
$w('#totalPoints').value = sum.toString();
})
4

J.D - not working.
Im putting it in $on.Ready((function)
Could it be because my input6 and others comes from dataset?

I used this one before:

$w('#repeater1').onItemReady(($item, data) => {
 let points = 0;
 for (let i = 1; i <= 5; i++) {
 let value = data[`points${i}`];
        points = points + Number(value);
    }
 
    $item('#totalPoints').text = String(points);
})

And it works perfectly, but i have inputs in front of me and when edits in them are made, totalPoints are not updating with this code. I need to submit first data and only then it retrieves new one.

The reason i need this is because i need to update one more field when i have totalPoints.

I wil ask from another perspective then - i understand that i can just make function that counts points1 to points5 after upload button is clicked, counts total sum and inserts that sum in field totalPoints in database. But its not for my level.

I really appreciate your help, trying to learn, understand and improve everytime.

This is pic. 1 to 5 comes from database. I have search filter by name and it retrieves item data.

300×1408 16.5 KB

@J. D.

5

You didn’t say it’s a repeater.
that’s a different story.
Anyway you should separate user inputs from data for the sake of clarity, and trigger the sum up function onItemReady and onInput;

6

All is working now. Here is what im using:

export function totalPoints_click_1(event, $item) {
 let points = 0
 let points1 = Number($item('#input6').value);
 let points2 = Number($item('#input7').value);
 let points3 = Number($item('#input8').value);
 let points4 = Number($item('#input9').value);
 let points5 = Number($item('#input10').value);

 let sum = points + points1 + points2 + points3 + points4 + points5;
 
    $item('#totalPoints').value = String(sum);
 // Add your code for this event here: 
}

Thank you for all assistance