I tried to use HTML to build an interactive table of maps, which can show several different maps from MapBox. I created a table with some radio buttons, like:

<table>
                <tr>
                    <td>
                        <input type="radio" name="layers" id="layer1" value="2000" checked><label>2000 &nbsp;
                            &nbsp;</label>
                        <input type="radio" name="layers" id="layer2" value="2008"><label>2008 </label>
                    </td>
                </tr>
            </table>

And then, I imported maps from MapBox by:

mapboxgl.accessToken = 'mytoken';  //Put your mapbox access token here

        var map1 = new mapboxgl.Map({
                //container: 'map', // container id
                style: 'mapbox_stylelink', // map background layer location
                center: [0, 51.5], // starting position [lng, lat]
                zoom: 10, // starting zoom
                pitch: 50 // tilt of the viewpoint in degrees
            });
        
        var map2 = mapboxgl.Map({
                //container: 'map', // container id
                style: 'mapbox_stylelink', // map background layer location
                center: [0, 51.5], // starting position [lng, lat]
                zoom: 8, // starting zoom
                pitch: 50 // tilt of the viewpoint in degrees
            });

And try to callback listener by:

document.getElementById("layer1").addEventListener("click", function(){
            document.getElementById("map")  = 'map1'
        });

        document.getElementById("layer2").addEventListener("click", function () {
                document.getElementById("map") = 'map2'
            });

When I start to go live with the code, it just can not change the map by clicking the 'radio' button in the table. I know there is something wrong with the callback, but I don't know how to correct it. And it also seems that the container should be empty when defining a new map. Can someone please give me some guidance？Thank you very much!