Insertadjacenthtml不是函数

Question

通过JavaScript for Web Warriors Book，第3章项目5。这是调试代码的任务，以便在Barchart中显示手机销售。错误：“ uckulting typeerror typeerror：

.insertAdjacentHTML is not a function.

// Array of phone models sold by the company
/* Changed parenthesis to braces to define an array - Debugged */
let phones = ["Photon 6E", "Photon 6X", "Photon 7E", "Photon 7X", "Photon 8P"];

// Units sold in the previous quarter
/* Changed parenthesis to braces to define an array - Debugged */
let sales = [10281, 12255, 25718, 21403, 16142];

// Variable to calculate total sales
let totalSales = 0;

// Use the forEach() method to sum the sales for each phone model and add it to the totalSales variable
/* addtoTotal needed to be capitalized to addToTotal - Debugged */
sales.forEach(addToTotal);

// For loop to generate bar chart of phone sales
/* Changed the i value from 1 to 0 - AA */
for (let i = 0; i <= phones.length; i++) {
   
   let barChart = "";   // Variable to store HTML code for table cells used to create bar chart
   
   // Calculate the percent of total sales for a particular phone model
   let barPercent = 100*sales/totalSales;
   
   
   let cellTag;   // Variable that will define the class of td elements used in creating the bar chart cells.
   
   // Determine the table cell based on the value of the phone model
   /* The switch case did not include a colon after each switch statement - Debugged */
   switch (phones[i]) {
      case "Photon 6E":
        cellTag = "<td class='group1'>";
        break;
      case "Photon 6X":
        cellTag = "<td class='group2'>";
        break;
      case "Photon 7E":
        cellTag = "<td class='group3'>";
        break;
      case "Photon 7X":
        cellTag = "<td class='group4'>";
          break;
      case "Photon 8P":
        cellTag = "<td class='group5'>";
        break;         
   }
   
   // Table cell containing information on phone and total sales (formatted using a thousands-separator)
   barChart += "<tr><th>" + phones[i] + " (" + formatNumber(sales[i]) + ")</th>";
   
   // For loop to create a table cell, 1 for each percentage value in the barPercent variable
   for (let j = 0; j <= barPercent; j++) {
      barChart += cellTag + "</td>";
   }
   barChart += "</tr>";

   // Insert the bChart HTML code into first tbody element in the web document
   /* beforeEnd was capitalized, changed to beforeend. - Debugged */
   document.getElementsByTagName("tbody").insertAdjacentHTML("afterbegin", barChart);
}


// Callback function that adds the value of each array element to the totalSales variable
function addToTotal(arrValue) {
   totalSales += arrValue;
}


// Function that takes a number value and returns it as a text string with a thousands separator
function formatNumber(value) {
   return value.toLocaleString();
}

I tried analyzing the HTML and CSS files to see if there was any kind of clue as to where I could potentially be messing up. I understand that I need to insert the code inbetween the <tbody></tbody> section of the HTML file.
So I tried rewriting the code as shown below to see if it would do anything different.

// Array of phone models sold by the company
/* Changed parenthesis to braces to define an array - Debugged */
let phones = ["Photon 6E", "Photon 6X", "Photon 7E", "Photon 7X", "Photon 8P"];

// Units sold in the previous quarter
/* Changed parenthesis to braces to define an array - Debugged */
let sales = [10281, 12255, 25718, 21403, 16142];

// Variable to calculate total sales
let totalSales = 0;

// Use the forEach() method to sum the sales for each phone model and add it to the totalSales variable
/* addtoTotal needed to be capitalized to addToTotal - Debugged */
sales.forEach(addToTotal);

// For loop to generate bar chart of phone sales
/* Changed the i value from 1 to 0 - AA */
for (let i = 0; i <= phones.length; i++) {
   
   let barChart = "";   // Variable to store HTML code for table cells used to create bar chart
   
   // Calculate the percent of total sales for a particular phone model
   let barPercent = 100*sales/totalSales;
   
   
   let cellTag;   // Variable that will define the class of td elements used in creating the bar chart cells.
   
   // Determine the table cell based on the value of the phone model
   /* The switch case did not include a colon after each switch statement - Debugged */
   switch (phones[i]) {
      case "Photon 6E":
        cellTag = "<td class='group1'>";
        break;
      case "Photon 6X":
        cellTag = "<td class='group2'>";
        break;
      case "Photon 7E":
        cellTag = "<td class='group3'>";
        break;
      case "Photon 7X":
        cellTag = "<td class='group4'>";
          break;
      case "Photon 8P":
        cellTag = "<td class='group5'>";
        break;         
   }
   
   // Table cell containing information on phone and total sales (formatted using a thousands-separator)
   barChart += "<tr><th>" + phones[i] + " (" + formatNumber(sales[i]) + ")</th>";
   
   // For loop to create a table cell, 1 for each percentage value in the barPercent variable
   for (let j = 0; j <= barPercent; j++) {
      barChart += cellTag + "</td>";
   }
   barChart += "</tr>";

   // Insert the bChart HTML code into first tbody element in the web document
   /* beforeEnd was capitalized, changed to beforeend. - Debugged */
   document.getElementsByTagName("tbody").insertAdjacentHTML("afterbegin", barChart);
}


// Callback function that adds the value of each array element to the totalSales variable
function addToTotal(arrValue) {
   totalSales += arrValue;
}


// Function that takes a number value and returns it as a text string with a thousands separator
function formatNumber(value) {
   return value.toLocaleString();
}

我仍然遇到完全相同的错误：“ insertadjacenthtml不是函数”。

为什么这是如此令人沮丧和令人困惑的是，在上一份作业中，我们完全使用了我刚刚尝试将代码重写的内容，并且效果很好。我对现在要尝试什么绝对死了，教授需要数周的时间来回应我在岩石和硬地点之间。

Answer 1

<tbody></tbody>

返回一个集合，因此您需要将其索引到结果中。例如：

   let TableCell = document.getElementsByTagName("tbody");
   TableCell.insertAdjacentHTML("beforeend", barChart)

此外，您的至少一个loops应该使用

getElementsByTagName()

而不是进行比较。