即使应放在文档中，也无法通过document.getElementById找到元素

Question

我正在尝试使用document.getElementById查找元素，但是现在出现以下错误：

  

未捕获的TypeError：无法读取null的属性'getContext'

仅当google maps为'idle'时才调用写此行的函数，因此该点应在文档中存在。

由于某种原因，我猜测调用该函数时html尚未加载。因此，我可能应该以某种方式更改addListenerOnce函数。我曾尝试用“ load”替换“ idle”，但这似乎没有用。

initializeDoughnut(map) {
    console.log(this.name.replace(/\s/g, ''));
    var doughnutMarker = createHTMLMapMarker({
        latlng: new google.maps.LatLng((this.latlng.lat()+0.00006),(this.latlng.lng()-0.00007)),
        map: map,
        html: `<div id="canvas-holder`+this.name.replace(/\s/g, '')+`" class="doughnut">
          <canvas id="chart-area`+this.name.replace(/\s/g, '')+`" width="110" height="110" />
      </div>
      `
      })
    google.maps.event.addListenerOnce(map, 'idle', function(){
        console.log("Map is idle at " + this.name);
        this.loaddoughnut();
    }.bind(this));
}

loaddoughnut() {
    var colors = ['#27AE60','#E74C3C'];

    var donutOptions = {
      cutoutPercentage: 80,
      legend: {display: false}
    };

    var donutData1 = {
      labels: [],
      datasets: [
        {
          backgroundColor: colors.slice(0,2),
          borderWidth: 0,
          data: [0, 0, 100],
          label: "Doughnut 1"
        },
      ]
    };

    var config = {
      type: 'doughnut',
      data: donutData1,
      options: donutOptions

    }
    console.log(document);
    console.log(document.getElementById("canvas-holder"+this.name.replace(/\s/g, '')));
    console.log(document.getElementById("chart-area"+this.name.replace(/\s/g, '')));
    // Line which gives the error
    var ctx = document.getElementById("chart-area"+this.name.replace(/\s/g, '')).getContext("2d");
    this.doughnutChart = new Chart(ctx, config); 
}