Question

This a part of code downloads an xml file used as data source on a map.
The data are place in an info window that has a button that calls the function confirmData(data) which loads a php file. But when i click the button an error says “RefereceError: crimeID is not defined”. How to debug this?

     var url = "crimeFetch3.php"; 
    downloadUrl(url, function(data) {   
        var xml = data.responseXML;
        var markers = xml.documentElement.getElementsByTagName("crime");
        for (var i = 0; i < markers.length; i++) {
            var point = new google.maps.LatLng(
                parseFloat(markers[i].getAttribute("lat")),
                parseFloat(markers[i].getAttribute("lng")));
            var crimeID = markers[i].getAttribute("crimeID");   
            var id = markers[i].getAttribute("id"); 
            var type = markers[i].getAttribute("type");
            var address = markers[i].getAttribute("address");
            var date = markers[i].getAttribute("date");
            var date2 = date +  " (yyyy-mm-dd)";
            var desc = markers[i].getAttribute("desc");
            var status = markers[i].getAttribute("status");
            if(status == "confirmed"){
                var html ="<table>"+

                    "<tr><td><b>Crime: </b> </td> <td><b><u> "  + type + "</u></b></td></tr></br>" +
                    "<tr><td><b>Address: </b> </td> <td> " + address + "</td></tr></br>" +
                    "<tr><td><b>Date: </b></td> <td> " + date2 + "</td></tr></br" +
                    "<tr><td><b>Description: /b></td> <td> " + desc + " </a></td></tr></br>" +
                    "<tr><td><b>Status: </b></td> <td> " + status + "</td></tr></table>";

            }else{
                var html ="<table>"+

                    "<tr><td><b>Crime: </b></td> <td><b><u> "  + type + "</u></b></td></tr></br>" +
                    "<tr><td><b>Address: </b></b></td> <td> " + address + "</td></tr></br>" +
                    "<tr><td><b>Date: </b></td> <td> " + date2 + "</td></tr></br" +
                    "<tr><td><b>Description: </b></td> <td> " + desc + " </a></td></tr></br>" +
                    "<tr><td><b>Status: </b></td> <td> " + status + "</a></td></tr></br>" +
                    "<tr><td></td><td><input type='submit' value='Confirm' onclick='confirmData(crimeID)'/></td></tr></table>";
            }
            var icon = markerIcons[type] || {};
            var marker = new google.maps.Marker({
                            map: map,
                            position: point,
                            shadow: shadow,
                            icon: markerIcons[id],
                            title: type
            });
            bindInfoWindow(marker, map, infoWindow, html);


        }
    }); 

} 
    function bindInfoWindow(marker, map, infoWindow, html) {
        google.maps.event.addListener(marker, 'click', function() {
            infoWindow.setContent(html);
            infoWindow.open(map, marker);
        });
    }

    function downloadUrl(url, callback) {
        var request = window.ActiveXObject ?
        new ActiveXObject('Microsoft.XMLHTTP') :
        new XMLHttpRequest;

        request.onreadystatechange = function() {
            if (request.readyState == 4) {
                request.onreadystatechange = doNothing;
                callback(request, request.status);
            }
        };

        request.open('GET', url, true);
        request.send(null);
    }

    function doNothing() {};

    var xmlhttp;
    function ajaxFunction(){
        if(window.ActiveXObject){
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        else if(window.XMLHttpRequest){
            xmlhttp = new XMLHttpRequest();
        }
        else{
            alert("Get another Web Browser!");
            }

    }
    function confirmData(data) {
        var crimeNum = data;
        ajaxFunction();


        function stateChanged(){
            if(xmlhttp.readyState == 4 && xmlhttp.status==200){
                alert(xmlhttp.responseText);
            }
        }
            var url = "confirmCrime.php?crimeNum=" + crimeNum;  
                xmlhttp.onreadystatechange=stateChanged();
                xmlhttp.open("GET",url,true);
                xmlhttp.send(null);
    }

Answer 1

crimeID is not a global variable.

After this code executes:

downloadUrl(url, function(data) {
   ...
   var crimeID = ...
});

Nothing can reference to the variable crimeID anymore.
This part onclick='confirmData(crimeID) is actually outside of the scope of the that block of code.

Change this part:

"<tr><td></td><td><input type='submit' value='Confirm' onclick='confirmData(crimeID)'/></td></tr></table>";

to this:

"<tr><td></td><td><input type='submit' value='Confirm' onclick='confirmData(" + crimeID + ")'/></td></tr></table>";