I want to compare the javascript var with odoo's t-if. But it gives me an error.

Xml file:

<odoo>

    <data>
    <record id="product_product_inherit" model="ir.ui.view">
                <field name="name">product.template.inherit</field>
        <field name="model">product.template</field>
        <field name="inherit_id" ref="product.product_template_only_form_view"/>
        <field name="arch" type="xml">
            <field name="default_code" position="after">
                <field name="gifpath" widget="image"/>
            </field>
        </field>
              </record>

       <template id="website_sales_inh" name="webiste_sales_inherit" inherit_id="website_sale.products_item">

          <xpath expr="//span[@class='d-flex h-100 justify-content-center align-items-center']" position="replace">
        <script type="text/javascript">
            var list = document.querySelectorAll('img');

            var i;
            var imgsrc=[];
            var trigger;
            for(i=0;i<3;i++)
            {
                imgsrc[i] = list[i].src;
                list[i].addEventListener("mouseover",function()
                {
                 trigger = 1;
                });
                list[i].addEventListener("mouseout",function()
                {
                  trigger = 0;
                });
            }
        </script>
        <t t-if="trigger == 1">
                      <span t-field="product.image_1920"
                                t-options="{'widget': 'image', 'preview_image': 'gifpath'}"
                                class="d-flex h-100 justify-content-center align-items-center"/>
        </t>
           
        <t t-elif="trigger == 0">
            <span t-field="product.image_1920"
                        t-options="{'widget': 'image', 'preview_image': 'image_1024' if product_image_big else 'image_256'}"
                        class="d-flex h-100 justify-content-center align-items-center"/>

        </t>
          </xpath>

       </template>

    </data>

</odoo>