|UPDATE| |SOLVED| Code to multiply numbers and post results in the text fields

Hi,

Any ideas on how to use multiplication in code? User inputs sale price and all text fields below are calculated.

See screenshot

Box 1 - will just show the sale price user typed in input box.
Box 2 - will be the sale price multiplied by 6%
Box 3 - will be the sale price multiplied by 2.5%
Box 4 - will show box 2 result minus box 3 result.

I would need the results to show as currency with “$” and comma.

This is my last task and I’ll be done with the site. Any assistance is greatly appreciated.

With the caution that I’m a beginning Velo and JavaScript coder, here’s some code that I tested and it works. I expect that @russian-dima or one of the other experts will look at it and offer improvements and fixes :grinning:

I think the various element names are self-explanatory.


$w.onReady(function () {
    $w("#inputSalePrice").onChange((Event) => {

        const salesPrice = Math.trunc(Number($w("#inputSalePrice").value)) ;
        const stdCommission = Math.round(salesPrice * 0.06);
        const ourCommission = Math.round(salesPrice * 0.03);
        const savings = stdCommission - ourCommission;

        $w("#inputSalePrice").value = null;

        $w("#txtPrice").text = '$' + salesPrice.toLocaleString();
        $w("#txtStdComm").text = '$' + stdCommission.toLocaleString();
        $w("#txtOurComm").text = '$' + ourCommission.toLocaleString();
        $w("#txtSavings").text = '$' + savings.toLocaleString();

    }) 
});


Thanks. I’ll try it out. Appreciate you taking the time to help.

I’m getting $NaN on all values. Maybe I plugged something in wrong. See below.

$w . onReady ( function () {
$w ( “#input247” ). onChange (( Event ) => {

    **const**  salesPrice  =  Math . trunc ( Number ( $w ( "#input247" ). value )) ; 
    **const**  stdCommission  =  Math . round ( salesPrice  *  0.06 ); 
    **const**  ourCommission  =  Math . round ( salesPrice  *  0.003 ); 
    **const**  savings  =  stdCommission  -  ourCommission ; 

    $w ( "#input247" ). value  =  **null** ; 

    $w ( "#text548" ). text  =  '$'  +  salesPrice . toLocaleString (); 
    $w ( "#text549" ). text  =  '$'  +  stdCommission . toLocaleString (); 
    $w ( "#text550" ). text  =  '$'  +  ourCommission . toLocaleString (); 
    $w ( "#text551" ). text  =  '$'  +  savings . toLocaleString (); 

    })  

});

A few suggestions:

First check the settings for the input field. I set mine to take numbers. If you’re allowing text, and entering a dollar sign or a comma, you’ll have this problem.

Second, look at the code. Do you see any red squiggly lines under anything? If so, hover your cursor over that part of the code, and you’ll be given an explanation of what’s wrong.

Third, stick some console.log statements into the code to see where things are going wrong. The first place I’d put one is immediately under the const salesPrice assignment. Log the value of salesPrice and see if it’s a number.

No squiggly lines. I put code in a JS checker and results were…

1:1 error '$w' is not defined. (no-undef)
2:3 error '$w' is not defined. (no-undef)
2:29 error 'Event' is defined but never used. (no-unused-vars)
3:42 error '$w' is not defined. (no-undef)
8:5 error '$w' is not defined. (no-undef)
10:5 error '$w' is not defined. (no-undef)
11:5 error '$w' is not defined. (no-undef)
12:5 error '$w' is not defined. (no-undef)
13:5 error '$w' is not defined. (no-undef)

I think I may have edited my response, above, after you checked it, so you may have missed what I think is the most likely problem.

I set my input field to accept numbers. If you set yours to accept text, you may be entering non-numeric characters (like commas or a dollar sign). In that case, the code would fail.

FYI, here’s my test page: https://laborstreet.editorx.io/xpractice/commissions

I expect that @Velo-Ninja or one of the other experts will look at it and offer improvements and fixes…

Monitoring your post → maybe :wink:
Improvements? → First wait for results. If there is a solution at the end and it works for the post-opener → no improvements needed :wink:.

A coder needs time to get a good solution → more time → more quality code.
Here an example…

…only who works on his own codes → will also get desired solution.

And btw, not every suggested improvement → is a MUST :grin:. Every coder should also have some kind of his own coding style.

And since i know you are also active on the editor-X-Forum, i think you are experienced enough, to get a solution here. But i will follow the process here :wink:

1 Like

Thank you vey much.

I got it to work. The only issue is that a User Input with type “number” does not allow the user to place a comma, thus making entering 500,000 a little confusing.

How can we make the code work with a comma?

You could ‘correct’ the text using the replace() method with regex. For more information, search on JavaScript code to remove non-numeric characters from a string. You’ll find some examples. Remember to consider decimal points.

The code worked but found out it had issues with iPhone/Safari. I did some research and found another method that didn’t involve Math.

New code works great. Get the same results and works on iPhone/Safari.

See code below. Hope it helps someone.

$w . onReady ( function () {
$w ( “#input247” ). onChange (( Event ) => {

**let**  price  =  Number ( $w ( '#input247' ). value ); 
**let**  traditionalPercent  =  Number  ( $w ( '#text556' ). text ); 
**let**  buyersAgentPercent  =  Number  ( $w ( '#text557' ). text ); 
 

$w ( "#input247" ). value  =  **null** ; 

$w ( '#text548' ). text  =  '$'  +  price . toLocaleString (); 
$w ( '#text549' ). text  =  '$'  + ( price  *  traditionalPercent ). toLocaleString (); 
$w ( '#text550' ). text  =  '$'  + ( price  *  buyersAgentPercent ). toLocaleString (); 
$w ( '#text551' ). text  =  '$'  + ( price  *  traditionalPercent  -  price  *  buyersAgentPercent ). toLocaleString (); 

})
});