调用insertAdjacentHTML时提示“is not a function”错误的调试求助

我完全懂你现在的挫败感——明明之前用类似的写法没问题，现在却卡在这里，教授又没法及时回复，这种卡在原地的感觉太闹心了！

先直接说你遇到的核心问题：
document.getElementsByTagName("tbody") 返回的不是单个DOM元素，而是一个HTMLCollection（元素集合），哪怕你的页面里只有一个<tbody>标签，它返回的也是包含这个元素的集合。而insertAdjacentHTML是单个DOM元素才有的方法，你直接给集合调用这个方法，自然会报错“is not a function”。

快速修复方案 #

你有两种简单的方式解决这个问题：

1. 从集合中取出第一个元素（因为你页面里应该只有一个tbody）：

document.getElementsByTagName("tbody")[0].insertAdjacentHTML("afterbegin", barChart);

2. 用更精准的querySelector方法，它会直接返回匹配到的第一个元素，代码更简洁直观：

document.querySelector("tbody").insertAdjacentHTML("afterbegin", barChart);

顺便帮你揪出代码里的其他小问题（避免后续踩坑） #

除了这个报错的问题，你的代码里还有两个容易导致异常的点：

• 计算百分比的代码写错了：let barPercent = 100*sales/totalSales; 这里的sales是整个数组，应该改成sales[i]，否则会用数组对象去做除法，得到的结果完全不对：

  let barPercent = 100 * sales[i] / totalSales;
  

• 外层for循环的条件有问题：for (let i = 0; i <= phones.length; i++) 数组的索引是从0到length-1，用<=会导致最后一次循环时i等于数组长度，此时phones[i]和sales[i]都是undefined，会引发新的错误，应该改成：

  for (let i = 0; i < phones.length; i++) {
  

把这些问题都修复后，你的代码应该就能正常生成柱状图了，祝你顺利搞定这个作业！

备注：内容来源于stack exchange，提问作者Tazvanor