Live site is not working like preview

Ive coded a simple code for counting the total number of items in my database and the total quantity. Then return the result in a text. The code shows the result in the preview mode but it does not show it in the live site. The text remains the same.

import wixData from 'wix-data';
$w.onReady(function () {
    });

export function button4_click(event) {
    wixData.query("Packaging")
    .count()
    .then ((total) => {
        $w('#text18').text = total.toString();
    })

    wixData.aggregate("Packaging")
    .sum("bigKraft", "sumB")
    .sum("smallKraft", "sumS")
    .run()
    .then((result) => {
 var bigKraft = result.items[0].sumB;
 var smallKraft = result.items[0].sumS;
        $w('#text19').text = bigKraft.toString ();
        $w('#text20').text = smallKraft.toString ();
    })
    $w('#text18').expand();
}

live and Preview screenshots after submit a new data.