无法通过 JS DOM 打印表格

Question

function myFunction() {
 
  var x = parseInt(document.getElementById("quantity").value);
  var x2 = parseInt(document.getElementById("quantity2").value);
  var x3 = parseInt(document.getElementById("quantity3").value);
  var x4 =parseInt( document.getElementById("quantity4").value);
  var x5 = parseInt(document.getElementById("quantity5").value);

  var arr = [x, x2, x3, x4, x5];
  var item= ["Water Bottles","Caps","Pens","Candy Bags","Cakes"];
  var price = [5,20,3,10,15];

  for (let i = 0; i < arr.length; i++) {
    if(arr[i] != 0){
      document.getElementById("table1").innerHTMl = '<tr><td> '+ item[i] +' </td><td>'+ arr[i] +'</td><td>$' + price[i] +'</td><td>'+ price[i]*arr[i] +'</td></tr>';
      console.log(arr[i]);   
    }
  }
}

我没有收到任何错误，但它仍然没有显示表格。 怎么做？

我尝试在 x 和 x3 中输入 1 和 6，而在控制台日志中它显示清楚但不在表中

Answer 1

你应该使用带有大写字母“L”的“innerHTML”。

function myFunction() {
  var x = parseInt(document.getElementById("quantity").value);
  var x2 = parseInt(document.getElementById("quantity2").value);
  var x3 = parseInt(document.getElementById("quantity3").value);
  var x4 = parseInt(document.getElementById("quantity4").value);
  var x5 = parseInt(document.getElementById("quantity5").value);

  var arr = [x, x2, x3, x4, x5];
  var item = ["Water Bottles", "Caps", "Pens", "Candy Bags", "Cakes"];
  var price = [5, 20, 3, 10, 15];

  var tableHTML = "";
  for (let i = 0; i < arr.length; i++) {
    if (arr[i] != 0) {
      tableHTML += '<tr><td>' + item[i] + '</td><td>' + arr[i] + '</td><td>$' + price[i] + '</td><td>' + price[i] * arr[i] + '</td></tr>';
      console.log(arr[i]);
    }
  }
  document.getElementById("table1").innerHTML = tableHTML;
}