How to trigger a Javascript onclick event from a button?

<?xml version="1.0" encoding="utf-8"?>
<odoo>
    <data>
        <record id="action_create_variants" model="ir.actions.client">
            <field name="name">Create variants</field>
            <field name="tag">product_product_matrix_create_variants</field>
        </record>
        <record id="product_template_form_view" model="ir.ui.view">
            <field name="model">product.template</field>
            <field name="inherit_id" ref="product.product_template_form_view"/>
            <field name="arch" type="xml">
                <xpath expr="//header/button" position="before">
                    <button string="Creeer varianten"
                            name="%(action_create_variants)d" type="action"
                            attrs="{'invisible': ['|', ('attribute_line_ids', '&lt;=', 0), ('is_product_variant', '=', True)]}"
                            groups="product.group_product_variant"/>
                </xpath>
            </field>
        </record>
    </data>
</odoo>

odoo.define('product_product_matrix.create_variants', function (require) {
    "use strict";

    var AbstractAction = require('web.AbstractAction');
    var core = require('web.core');

    var CreateVariants = AbstractAction.extend({
        init: function () {
            this.call_function();
        },

        call_function: function (event) {
            console.log('Click');
            alert("Click");
        },

    });
    core.action_registry.add('product_product_matrix_create_variants', CreateVariants);
});