网页html错误：Uncaught TypeError: Cannot read property 'addEventListener' of null

逻辑是点击图标，显示信息框，代码写成这样的

function openInfo(content,e){
  var p = e.target;
  content = content+'<br/>坐标 : <br/>'+p.getPosition().lng+'&nbsp;'+p.getPosition().lat;
  content = content+"<br/><Button id='startPoint'>设为起点</Button>";
  content = content+"&nbsp;&nbsp;&nbsp;&nbsp;<Button id='endPoint'>设为终点</Button>";
  var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
  var infoWindow = new BMap.InfoWindow(content,opts);  // 创建信息窗口对象
  map.openInfoWindow(infoWindow,point); //开启信息窗口

但是会发生报错：Uncaught TypeError: Cannot read property 'addEventListener' of null

影响就是第一次渲染监听不到，而后果就是点击的第一次无法监听，点击无效。

上网搜了很久也没有解决办法，其实这时候用延时监听就可以了！！！

我的代码写成这样

window.setTimeout(function() {
  document.getElementById('startPoint').addEventListener('click', function() {
    console.log(p.getPosition());
    startLng = p.getPosition().lng;
    startLat = p.getPosition().lat;
    map.closeInfoWindow();
  }, false);
  document.getElementById('endPoint').addEventListener('click', function() {
    endLng = p.getPosition().lng;
    endLat = p.getPosition().lat;
    route();
  }, false);
}, 500);

也就是在监听的时间中添加延时监听函数

window.setTimeout(function() {
}, 500);

希望可以帮到大家。