无法从另一个文件中 getElementById

Question

I have set up an leaflet map in the index.php and here I include a external *.js file, which connect to an API service to recieve real time data. the received data must be processed and that happens in the external * .js file, which is included in the header of the index.php

the processed data will be shown as refreshing markers on the map and know my goal is to jump to marker1 by clicking button1. to jump to the markers is inspired by this fiddle :

var markersById = {}
var TTvehicleObj = {};

function refreshTable(){

   // code which creates TTvehicleObj

    function addTTlayer() {
        TTJsonLayer = L.geoJSON(null, {
            pointToLayer: function (feature, latlng) {
                return L.marker(latlng, {icon: vehicleMarker});
            },
            onEachFeature: function(feature, layer) {
                if (feature.properties.Ignition == 0 && feature.properties.Standstill == 1) {
                        vehicleParking = '<span class="label label-default">P</span>&nbsp;';
                    } else if (feature.properties.Ignition == 1 && feature.properties.Standstill == 1) {
                        vehicleParking = '<span class="label label-primary">P</span>&nbsp;';
                    } else {
                        vehicleParking = '';
                    }
                    layer.bindPopup(vehicleParking+'<strong>'+feature.properties.Funknummer+'</strong>&nbsp;|&nbsp;'+feature.properties.Position);

                    if (feature.properties.id) {
                        markersById[feature.properties.id] = layer;
                    }
                }
            });

        TTJsonLayer.addData(TTvehicleObj);
        TTJsonLayer.addTo(map);
        //map.fitBounds(TTJsonLayer.getBounds());

        $.each(TTvehicleObj.features, function(key, value) {
            //console.log(key+':'+value.properties.id);
            setMarkerButton('"vehicle'+value.id+'"');
        });         

        function setMarkerButton(id) { 
            document.getElementById(id).addEventListener("click", function () {
            map.setView(markersById[id].getLatLng(), map.getZoom());
          });
        }
    }

    function refreshTTlayer() {
        if (typeof TTJsonLayer === 'undefined') {
            console.log(consoleLogTime.getHours()+':'+consoleLogTime.getMinutes()+':'+consoleLogTime.getSeconds()+' TTlayer ist nicht vorhanden');
            addTTlayer();
            console.log(consoleLogTime.getHours()+':'+consoleLogTime.getMinutes()+':'+consoleLogTime.getSeconds()+' TTlayer wurde erstellt');
        } else {
            map.removeLayer(TTJsonLayer);
            console.log(consoleLogTime.getHours()+':'+consoleLogTime.getMinutes()+':'+consoleLogTime.getSeconds()+' TTlayer wurde entfernt');
            addTTlayer();
            console.log(consoleLogTime.getHours()+':'+consoleLogTime.getMinutes()+':'+consoleLogTime.getSeconds()+' TTlayer wurde aktualisiert');
        }

    }

    refreshTTlayer();

});
}

now I get the following error:

Uncaught TypeError: Cannot read property 'addEventListener' of null

theoretical I can explain the error to me, but I don't know how to solve this.

if I try to move the function setMarkerButton in the index.php after refreshTable I will get tis error:

Uncaught ReferenceError: setMarkerButton is not defined

I think i can also explain this error to myself but I am very confused at the moment, therefore I have to ask for help.

thx in advance

--- edit ---

the refreshTable is called in the index.php after the included *.js file. i think one of my problem is, that the timing isn't correct and the TTvehicleObj and other functions aren't global available.

I can rule out mismatched our double used ids.

my question is, how can i acces the looped setMarker(); from my index.php?

Answer 1

As commented, your question lacks details to make it crystal clear what your exact issue is. In particular, the HTML with <button> 's your trying to reach with document.getElementById() .

That being said, I highly suspect that the id you try to compose in:

setMarkerButton('"vehicle'+value.id+'"')

…is incorrect.

If this ID is incorrect, document.getElementById(id) returns null , on which you cannot call addEventListener , hence your Error message.

1. There is a very high chance you have extra double quotes ( " ).

2. The value.id should probably have been value.properties.id . Indeed, you are looping through a GeoJSON Feature Collection ( TTvehicleObj.features ). Each Feature can indeed have an id (as per GeoJSON standard), but in your case you are accessing a few lines above feature.properties.id , therefore it looks like your id is actually a sub-member of properties .

Therefore you would probably need to replace the above line by:

setMarkerButton('vehicle'+value.properties.id);

and the <button> (or the actual tag that you use) should have an id that looks like: id="vehicle<ID>" where <ID> is the exact value in feature.properties.id .