时间戳

首页 > 解决方案 > 如何在未定义的 getElementsByClass 上运行 addEventListener？

javascript - 如何在未定义的 getElementsByClass 上运行 addEventListener？

问题描述

我有一个搜索输入，它在用户键入时在其下方的 div 中填充建议，我想向建议 div 添加一个事件侦听器。问题是当页面加载时，建议 div 没有填充任何内容，因为用户尚未在搜索输入中键入任何内容并且它抛出

类型错误：searchSugg 未定义

有没有解决的办法？我尝试将侦听器包装进去if (searchSugg !== undefined) {...}，虽然它没有抛出错误，但它也没有运行该addEventListener函数。

代码：

    var searchSugg = document.getElementsByClassName('mapboxgl-ctrl-geocoder--suggestion')[0];  
    searchSugg.addEventListener('click', function() {
        // // Create variables to use in isochrone API
        var urlBase = 'https://api.mapbox.com/isochrone/v1/mapbox/';
        var lng = geocoder.mapMarker._lngLat.lng;
        var lat = geocoder.mapMarker._lngLat.lat;
        var profile = 'cycling';
        var minutes = 10;
        // Create a function that sets up the Isochrone API query then makes an Ajax call
            var query = urlBase + profile + '/' + lng + ',' + lat + '?contours_minutes=' + minutes + '&polygons=true&access_token=' + mapboxgl.accessToken;
                    $.ajax({
                    method: 'GET',
                    url: query
                    }).done(function(data) {
                        map.getSource('iso').setData(data);
                    })
        map.addSource('iso', {
            type: 'geojson',
            data: {
            'type': 'FeatureCollection',
            'features': []
            }
        });
        map.addLayer({
            'id': 'isoLayer',
            'type': 'fill',
            // Use "iso" as the data source for this layer
            'source': 'iso',
            'layout': {},
            'paint': {
            // The fill color for the layer is set to a light purple
            'fill-color': '#5a3fc0',
            'fill-opacity': 0.3
            }
        }, "poi-label");
    });

标签： javascriptdomgetelementsbyclassname

解决方案

searchSugg您可以在分配处理程序之前检查是否存在click。

let searchSugg = document.getElementsByClassName("some-class-that-does-not-exist")[0];

searchSugg && searchSugg.addEventListener('click', event => {
  // click event handler code
});

// Or you can do
if (searchSugg) {
  searchSugg.addEventListener('click', event => {
    // click event handler code
  });
}
<p>Some Webpage</p>

推荐阅读