Google可视化折线图动态更新数据行时addEventListener绑定报错问题

错误原因 #

你的JS代码执行顺序早于DOM渲染：当前<script>标签放在<body>内容之前，运行到document.getElementById("pd1")这行时，id为pd1的a标签还没有被浏览器解析渲染，返回结果为null，调用addEventListener方法就会抛出类型错误。你在jsfiddle上运行正常是因为平台默认会把JS代码放在DOM加载完成后执行，所以不会触发该错误。

解决方案（三选一即可） #

方案1：包裹事件绑定代码到DOM加载完成回调 #

修改事件绑定部分的代码为：

document.addEventListener('DOMContentLoaded', function() {
  document.getElementById("pd1").addEventListener("click", newchart);
});

其余代码保持不变即可。

方案2：调整JS代码位置 #

把整段<script>标签的内容移动到</body>闭合标签之前，也就是放在<div id="chart"></div>的后面，这样JS执行时所有DOM元素已经渲染完成，可以正常获取到目标元素。

方案3：直接用HTML属性绑定事件 #

修改a标签代码：

<a id="pd1" onclick="newchart()">VOD</a>

同时删除原来的document.getElementById("pd1").addEventListener("click",newchart);这一行即可。

可选优化 #

你当前drawChart和updateChart函数里存在大量重复的列定义、数据转换逻辑，可以把公共逻辑抽成单独函数，减少代码冗余。

内容的提问来源于stack exchange，提问作者Gaurav K.M.