How I can add event listener on checkboxes,when they are handle by a single function?

Question

I am trying to add event listener on checkboxes to show there address on google map with marker, but it gives error again and again that "TypeError: document.getElementsByClassName(...).addEventListener is not a function"..

<!DOCTYPE html>
<html>
    <head>
        <style>
            #map{
                width:100%;
                height:600px;
            }
            body,html{
                height: 100%;
                margin: 0px;
                padding: 0px;
            }
            #form-wrapper{
                position: absolute;
                top:45px;
                left:1%;
                border: 1px solid #000;
                z-index:5;
                background: #ffffff;
                padding: 10px;

            }
        </style>
    </head>
    <body>
        <div id="form-wrapper">
            <input type="checkbox" class="test" data-id="1" value="Shimla India">Shimla<br>
            <input type="checkbox" class="test" data-id="2"value="Chandigarh India">Chandigarh<br>
            <input type="checkbox" class="test" data-id="3"value="Goa India">Goa
        </div>
        <div id="map"></div>

        <script>
            var map;
            var geocoder;
            var marker;
            var markers = {};
            function initMap(){
                map = new google.maps.Map(document.getElementById('map'),{
                    center:{lat:31.104605, lng:77.173424},
                    zoom:8

                });
                multiAddress();
            }   
            function geocoderAddress(geocoder, mapResult,address,markerId){
                geocoder.geocode({'address':address},function(results,status){
                    if(status === 'OK'){
                        mapResult.setCenter(results[0].geometry.location);
                        console.log(results[0].geometry.location)
                        marker = new google.maps.Marker({
                            id:markerId,
                            position:results[0].geometry.location,
                            map: mapResult
                        });
                        markers[markerId] = marker;
                    } else {
                        alert('Geocode in not successful');
                    }
                });
                return marker;
            }
            function multiAddress(){
                document.getElementsByClassName('test').addEventListener('change', function() {
                    geocoder = new google.maps.Geocoder();
                var address = $(this).val();
                var id = $(this).data('id');
                var check = $(this).prop('checked');
                if(check == true){
                    geocoderAddress(geocoder,map,address,id);
                } else{
                    removeMarker(id);
                }
                });
            }
            function removeMarker(markerid){
                var marker = markers[markerid];
                marker.setMap(null);
            }


        </script>
        <script async defer src="https://maps.googleapis.com/maps/api/js?key=xxxxxxxxxxxxxxxxxx&callback=initMap">
    </script>
    </body>
</html>

`getElementsByClassName` returns a **list** of elements. It looks like you are using jQuery for some parts but haven't actually included jQuery. *If* you are using jQuery, then use *that* to bind the event handler. — Felix Kling, Jan 05 '17 at 04:39
I searched for [`getElementsByClassName addEventListener`](https://stackoverflow.com/search?q=getElementsByClassName+addEventListener). — Felix Kling, Jan 05 '17 at 04:42

How I can add event listener on checkboxes,when they are handle by a single function?

0 Answers0