I have a .html of a map from mapbox that should display in a page on a wix site. I want to change some layers visibility and I followed some tutorials, but I'm receiving this error message that don't show wherer de error is:

TypeError: Cannot read properties of undefined (reading 'getElementById').

Here's my code until now, hope someone can help me!!!

import mapboxgl from 'mapbox-gl';

var isMatch = new Boolean ([true]); 

$w.onReady(function () {
    
mapboxgl.accessToken = 

'pk.eyJ1Ijoiam9hb3BlZHJvdmdhIiwiYSI6ImNreGtqMHZxZTJwcTIzMHB6Y2lnMm00czkifQ.auBfiQMlyayVxRlHCPuPkQ';

const map = new mapboxgl.Map ({

    container: 'Basic',

    style: 'mapbox://styles/joaopedrovga/ckxkj2aon1xh314me52nin8w8'
});

$w('#au').onClick((event) =>{

if(isMatch)

    {
        $w('#img').hide();
        map.setLayoutProperty('water', 'visibility', 'none');
        isMatch = false; 
    }
    else{
        $w('#img').show();
        map.setLayoutProperty('water', 'visibility', 'visible');
        isMatch = true;
    }
});
});