Percentage calculation for progress bar

Ask the community
,
1

I want to percentage calculation for progress bar.
There are Target, Current value, and Current percentage.

600 is current value calculation from wix database.
1000 is The Target just text.
NaN% is the Current percentage I want to display.

848×370 23.6 KB

I want to
1 Display the current percentage.
2 Connect to progress bar

my code for 1 is…

$w.onReady( function () {
// Write your JavaScript here

$w( "#text11" ).text = (Number($w( '#text12' ))) / (Number($w( '#text10' ))) *  100  +  "%" ;

// Click “Preview” to run your code
});

This code not work. Display NaN%

Someone please help me.

2

Hi nanami,

You need to take the .text property of the text boxes in your calculation, rather than the text box object itself.

$w('#text11').text = ( ( Number($w('#text10').text) / Number($w('text12').text) ) * 100 ) + "%";

Your calculation for percentage is also backwards, based on what you’ve given us. I would highly suggest giving your objects useful names to avoid confusing yourself. Also, breaking up long lines into the math portion and the text portion may help.

Something like this would be much more readable, in my opinion.

let value = Number( $w('#ValueText').text );
let target = Number( $w('#TargetText').text );
let percent = 100 * ( value / target );

$w('#PercentText').text = percent.toString() + '%';
3

I think you forgot the “.text” you were mentioning:

let value = Number( $w('#ValueText').text );
let target = Number( $w('#TargetText').text );
let percent = 100 * ( value / target );

$w('#PercentText').text = percent.toString() + '%';
4

@brainstorrrm Absolutely correct. :sweat_smile: Edited original post for clarity.

5

Thank you @brainstorrrm and @derekmoorer

I try 2ways you suggested but display same NaN%.

I think this is the case the value is the calculation from wix database.

the value code is

$w.onReady( async function () {
wixData.query( “gckj2gyh” )
.find()
.then((res) => {
let items=res.items
let sum = 0

    items.forEach((item)=>{  
        sum = sum + item.price 
        console.log(sum) 
       $w( '#text10' ).text=String(sum); 
    }); 
}) 
. **catch** ( (error) => {

let errorMsg = error.message;
let code = error.code;
});
})

6

Does anyone know?

7

When are you doing the calculation for the percentage? The code isn’t included above.

If you’re pulling one of the values from a query, you need to ensure that query finishes first before using the result for calculation.

8

@derekmoorer Sorry for the late reply.
It’s work!!!

I use

$w( ’ #text10 ’ ).text=String(sum) + “$”;

before your code.

so replace after your code.

Thank you so much!!!