Calculator

Ask the community
,
1

Is there anyone that could help me with the Wix
coding on a calculator?
I am having issues with it calculating. Any help with be greatly appreciated.

Here's a sample of the page I have created.

575×898 67.9 KB

export function SG1Pur_change ( event , $w ) {
let price = Number ( $w ( ‘#SG1Per’ ). text );
let selectedSG1Pur = Number ( event . target . value );
$w ( ‘#SG1R’ ). text = String ( selectedSG1Pur * price );
$w ( ‘#TotalRewards’ ). text = String ( Number ( $w ( ‘#SG1R’ ). text ) + Number ( $w ( ‘#SG3R’ ). text ) + Number ( $w ( ‘#SG5R’ ). text )

  • Number ( $w ( ‘#A35R’ ). text ) + Number ( $w ( ‘#I5R’ ). text ) + Number ( $w ( ‘#BG12R’ ). text ) + Number ( $w ( ‘#W6R’ ). text )
  • Number ( $w ( ‘#FP10R’ ). text ) + Number ( $w ( ‘#PR25R’ ). text ));
    }
    export function SG3Pur_change ( event , $w ) {
    let price = Number ( $w ( ‘#SG3Per’ ). text );
    let selectedSG3Pur = Number ( event . target . value );
    $w ( ‘#SG3R’ ). text = String ( selectedSG3Pur * price );
    $w ( ‘#TotalRewards’ ). text = String ( Number ( $w ( ‘#SG1R’ ). text ) + Number ( $w ( ‘#SG3R’ ). text ) + Number ( $w ( ‘#SG5R’ ). text )
  • Number ( $w ( ‘#A35R’ ). text ) + Number ( $w ( ‘#I5R’ ). text ) + Number ( $w ( ‘#BG12R’ ). text ) + Number ( $w ( ‘#W6R’ ). text )
  • Number ( $w ( ‘#FP10R’ ). text ) + Number ( $w ( ‘#PR25R’ ). text ));
    }
    export function SG5Pur_change ( event , $w ) {
    let price = Number ( $w ( ‘#SG5Per’ ). text );
    let selectedSG5Pur = Number ( event . target . value );
    $w ( ‘#SG5R’ ). text = String ( selectedSG5Pur * price );
    $w ( ‘#TotalRewards’ ). text = String ( Number ( $w ( ‘#SG1R’ ). text ) + Number ( $w ( ‘#SG3R’ ). text ) + Number ( $w ( ‘#SG5R’ ). text )
  • Number ( $w ( ‘#A35R’ ). text ) + Number ( $w ( ‘#I5R’ ). text ) + Number ( $w ( ‘#BG12R’ ). text ) + Number ( $w ( ‘#W6R’ ). text )
  • Number ( $w ( ‘#FP10R’ ). text ) + Number ( $w ( ‘#PR25R’ ). text ));
    }
    export function A35Pur_change ( event , $w ) {
    let price = Number ( $w ( ‘#A35Per’ ). text );
    let selectedA35Pur = Number ( event . target . value );
    $w ( ‘#A35R’ ). text = String ( selectedA35Pur * price );
    $w ( ‘#TotalRewards’ ). text = String ( Number ( $w ( ‘#SG1R’ ). text ) + Number ( $w ( ‘#SG3R’ ). text ) + Number ( $w ( ‘#SG5R’ ). text )
  • Number ( $w ( ‘#A35R’ ). text ) + Number ( $w ( ‘#I5R’ ). text ) + Number ( $w ( ‘#BG12R’ ). text ) + Number ( $w ( ‘#W6R’ ). text )
  • Number ( $w ( ‘#FP10R’ ). text ) + Number ( $w ( ‘#PR25R’ ). text ));
    }
    export function I5Pur_change ( event , $w ) {
    let price = Number ( $w ( ‘#I5Per’ ). text );
    let selectedI5Pur = Number ( event . target . value );
    $w ( ‘#I5R’ ). text = String ( selectedI5Pur * price );
    $w ( ‘#TotalRewards’ ). text = String ( Number ( $w ( ‘#SG1R’ ). text ) + Number ( $w ( ‘#SG3R’ ). text ) + Number ( $w ( ‘#SG5R’ ). text )
  • Number ( $w ( ‘#A35R’ ). text ) + Number ( $w ( ‘#I5R’ ). text ) + Number ( $w ( ‘#BG12R’ ). text ) + Number ( $w ( ‘#W6R’ ). text )
  • Number ( $w ( ‘#FP10R’ ). text ) + Number ( $w ( ‘#PR25R’ ). text ));
    }
    export function BG12Pur_change ( event , $w ) {
    let price = Number ( $w ( ‘#BG12Per’ ). text );
    let selectedBG12Pur = Number ( event . target . value );
    $w ( ‘#BG12R’ ). text = String ( selectedBG12Pur * price );
    $w ( ‘#TotalRewards’ ). text = String ( Number ( $w ( ‘#SG1R’ ). text ) + Number ( $w ( ‘#SG3R’ ). text ) + Number ( $w ( ‘#SG5R’ ). text )
  • Number ( $w ( ‘#A35R’ ). text ) + Number ( $w ( ‘#I5R’ ). text ) + Number ( $w ( ‘#BG12R’ ). text ) + Number ( $w ( ‘#W6R’ ). text )
  • Number ( $w ( ‘#FP10R’ ). text ) + Number ( $w ( ‘#PR25R’ ). text ));
    }
    export function W6Pur_change ( event , $w ) {
    let price = Number ( $w ( ‘#W6Per’ ). text );
    let selectedW6Pur = Number ( event . target . value );
    $w ( ‘#W6R’ ). text = String ( selectedW6Pur * price );
    $w ( ‘#TotalRewards’ ). text = String ( Number ( $w ( ‘#SG1R’ ). text ) + Number ( $w ( ‘#SG3R’ ). text ) + Number ( $w ( ‘#SG5R’ ). text )
  • Number ( $w ( ‘#A35R’ ). text ) + Number ( $w ( ‘#I5R’ ). text ) + Number ( $w ( ‘#BG12R’ ). text ) + Number ( $w ( ‘#W6R’ ). text )
  • Number ( $w ( ‘#FP10R’ ). text ) + Number ( $w ( ‘#PR25R’ ). text ));
    }
    export function FP10Pur_change ( event , $w ) {
    let price = Number ( $w ( ‘#FP10Per’ ). text );
    let selectedFP10Pur = Number ( event . target . value );
    $w ( ‘#FP10R’ ). text = String ( selectedFP10Pur * price );
    $w ( ‘#TotalRewards’ ). text = String ( Number ( $w ( ‘#SG1R’ ). text ) + Number ( $w ( ‘#SG3R’ ). text ) + Number ( $w ( ‘#SG5R’ ). text )
  • Number ( $w ( ‘#A35R’ ). text ) + Number ( $w ( ‘#I5R’ ). text ) + Number ( $w ( ‘#BG12R’ ). text ) + Number ( $w ( ‘#W6R’ ). text )
  • Number ( $w ( ‘#FP10R’ ). text ) + Number ( $w ( ‘#PR25R’ ). text ));
    }
    export function PR25Pur_change ( event , $w ) {
    let price = Number ( $w ( ‘#PR25Per’ ). text );
    let selectedPR25Pur = Number ( event . target . value );
    $w ( ‘#PR25R’ ). text = String ( selectedPR25Pur * price );
    $w ( ‘#TotalRewards’ ). text = String ( Number ( $w ( ‘#SG1R’ ). text ) + Number ( $w ( ‘#SG3R’ ). text ) + Number ( $w ( ‘#SG5R’ ). text )
  • Number ( $w ( ‘#A35R’ ). text ) + Number ( $w ( ‘#I5R’ ). text ) + Number ( $w ( ‘#BG12R’ ). text ) + Number ( $w ( ‘#W6R’ ). text )
  • Number ( $w ( ‘#FP10R’ ). text ) + Number ( $w ( ‘#PR25R’ ). text ));
    }
2

What exactly is the issue?
At which part of code do you have your problems?

3

When I enter the purchases. It is not calculating a total reward for any of the programs.
I am self taught and just starting to dive into this word of coding to be truthful.

4

Just one simple question!
Are you sure your buttons are working?

Since you use the risky code-technique by using the export function of a button, you take always the risk to loose connection to property-panel. RESULT → Your button do not work anymore and do not fire any action.

How to do it better?
Let us take one of your functions…

You start LIKE ALWAYS, with → $w.onReady , where you will put in all your CODE inside!

Do some testings with this CODE-SETUP! Take a look onto CONSOLE and decide what and how to do next.

$w.onReady(()=>{
  $w('#SG1Pur').onChange((event)=>{console.log(`Button ${event.target.id} clicked!`);
    let price = Number($w('#SG1Per').text); console.log("PRICE: ", price);
    let selectedSG1Pur = Number(event.target.value); console.log("SG1-Pur: ", selectedSG1Pur);
    $w('#SG1R').text = String(selectedSG1Pur*price);
    $w('#TotalRewards').text = String(Number($w('#SG1R').text) + 
                              Number($w('#SG3R').text) + 
                              Number($w('#SG5R').text) + 
                              Number($w('#A35R').text) + 
                              Number($w('#I5R').text) + 
                              Number($w('#BG12R').text) + 
                              Number($w('#W6R').text) + 
                              Number($w('#FP10R').text) + 
                              Number($w('#PR25R').text)
                            );
  });
});
5

I’m not using any buttons. Only have the input fields. I was hoping to just be able to enter the purchases for different vendors and calculate each one and also give a total to see what their checks would be at the end of the quarter.

So will I need to add a button for each section or just one at the end to get my total rewards?

6

$w ( ‘#SG1Pur’ ). onChange (( event ) => { console . log ( Button ${ event . target . id } clicked! );

Sorry did not want to confuse you.
The console-log is not 100% correct.
If → SG1Pur is your input-field and i guess it is → then the console-log should be → “Input-Data changed”!

Try always to code systimaticaly and also using the right namens and declarations inside your code for your used page-elements.

If it is a button → btnNext
If it is an inputfield → inpMyInput
And so on. Coding this way you also give EXTERN-CODER the possibility to read your code easier and faster.

And of course no button needed.
You can do it in different ways.
You can add just one CALCULATE-BUTTON if you want.
You can add a button for every single CALCULATION-STEP, or you simply do not use any button and do it trough your Keyboard using ENTER-BUTTON.
You can also use the Tab-Key in keyboard + onFocus/Blur

Or you do a combination of all suggestions. IT’s on you how you want to manage it.

7

Thank you I will try the different combination.

You have been very helpful. Have a Wonderful Weekend!

8

Take a look at this one… (done for the first 3 values).

$w.onReady(()=>{
    $w('#SG1Pur').onChange(()=>{let total = await start_Calculation();
        $w('#SG1R').text = String(Number(event.target.value)*Number($w('#SG1Per').text));
        $w('#TotalRewards').text =  String(Number($w('#SG1R').text) + total); 
    });
  //--------------------------------------------------------------------------
    $w('#SG3Pur').onChange(()=>{let total = await start_Calculation();
        $w('#SG3R').text = String(Number(event.target.value)*Number($w('#SG3Per').text));
        $w('#TotalRewards').text =  String(Number($w('#SG1R').text) + total);
    });
  //--------------------------------------------------------------------------
    $w('#SG5Pur').onChange(async()=>{let total = await start_Calculation();
        $w('#SG5R').text = String(Number(event.target.value)*Number($w('#SG5Per').text));
        $w('#TotalRewards').text =  String(Number($w('#SG1R').text) + total);                           
    });
});

function start_Calculation() {
    let myValue = [], total = 0;
        myValue[0] = Number($w('#SG3R').text);
        myValue[1] = Number($w('#SG5R').text);
        myValue[2] = Number($w('#A35R').text);
        myValue[3] = Number($w('#I5R').text);
        myValue[4] = Number($w('#BG12R').text);
        myValue[5] = Number($w('#W6R').text);
        myValue[6] = Number($w('#FP10R').text);
        myValue[7] = Number($w('#PR25R').text);
    for (let i = 0; i < myValue.length; i++) {total = total + myValue[i]} return (total);
}