从滑块检索数据时，D3js EventListener和getElementByID为空

Question

我正在使用滑块构建D3.js可视化文件。

滑块的年份显示为h2，并且我为其分配了一个id（“ vardatayear”）。

当我打算把那年传递给我的文件路径字符串时，我使用了带有innerHTML的getElementById（请参阅底部的导入）：

var honeyyear = document.getElementById("vardatayear").innerHTML;

if(!honeyyear){
    honeyyear  = 2013
}

这将返回2013，但是如果将if注释掉，它将检索“ null”。

我试图找到其他方法来拾取滑块中的更改，并且添加了一个EventListener：

document.addEventListener("click", function(){
    document.getElementById("demo").innerHTML = "Hello World!";
});
update(honeyyear);

使用EventListener时，出现以下错误：

  

未捕获的TypeError：无法将属性'innerHTML'设置为null       在HTMLDocument。 （app.js：131）

即使我可以在控制台和HTML上看到更改，这也意味着honeyyear为null。

我的目标是在滑动条中更改年份的任何时候检索年份，并将该值分配给变量，以用于导入不同的文件（根据年份）。

我想念什么？对此过程中的任何指导表示赞赏。

---

导入

d3.json( `data/HoneyProduction-${honeyyear}.json` , function( honey_data ){

滑块

// Slider
function update(year){
    slider.property("value", year);
    d3.select(".year").text(year);
};

var slider = d3.select(".slider")
    .append("input")
    .attr("type", "range")
    .attr("min", 2009)
    .attr("max", 2013)
    .attr("step", 1)
    .on("input", function() {
        var year = this.value;
        update(year);
    });