.onClick() works in preview, but not published site

Ask the community
,
1

Hi folks! I’ve got a strange one here. I have a page that allows users to make a donation. There’s an input field where they can set the amount they want to donate and a dropdown to choose whether they would like to offset our processing fees.

When I run the page by clicking “Preview” it works as expected. However, when I publish the page and point my web browser to it, the console is showing that the code is thowing a “$w(…).onChange is not a function” error. Here’s the code I currently have:

import wixPay from 'wix-pay';
import {createDonation} from 'backend/pay';

$w('#input2').onChange(function() {
    calculateTotal();
});

$w('#dropdown2').onChange(function() {
    calculateTotal();
});

function calculateTotal() {
    ...do stuff...
}

Changing the paramater to

.onChange((event) => {

produces the same result. I’ve also attempted to use this code instead, but changes don’t fire the function at all:

export function input2_change(event) {
    calculateTotal();
}

export function dropdown2_change(event) {
    calculateTotal();
}

Any ideas as to why I’m running into this?

2

Well, that was embarrassing. I figured it out. I needed to place these within the $w.onReady function. The components don’t exist until the page is loaded.

3

I think you need to add the onChange(() to the onReady like this:

$w.onReady(() => {
$w('#input2').onChange(() => {
    calculateTotal();
});


$w('#dropdown2').onChange(() => {
    calculateTotal();
});
});

(I haven’t tested it)