使用Javascript生成表

我正在尝试根据运行的两个循环生成一个表

现在，我正试图生成表，但不断出现以下错误：

无法读取null的属性“appendChild”

它所指的代码行如下：

body.appendChild(tbl);

但我不确定为什么不能正确地附加tbl。任何帮助都将不胜感激

var bmrMultiplier;
var userBMR;


function genderInput() {

  gender = prompt("Please enter your gender, note that answers are case sensitive and must be entered exactly as shown:\n\nF: for Female\nM: for Male\n");

  switch (gender) {
    case "M":
      console.log('Gender is ' + gender);
      bmrMultiplier = 26.4;
      weightInput();
      break;
    case "F":
      console.log('Gender is ' + gender);
      bmrMultiplier = 24.2;
      weightInput();
      break;
    default:
      alert('That is not a proper selection.');
      document.write('Please refresh the page to try again');
      console.log('default');
  }
}

//Sets up second user prompt and sets the value of difficulty based on the user selection

function weightInput() {

  weight = parseInt(prompt("Please enter your weight in kilograms"));

  console.log('Weight is ' + weight);

  if (isNaN(weight)) {
    console.log('This is not a number');
    alert('That is not a valid weight, please enter your weight in kilograms');
    weightInput();
  } else {
    console.log('This is a valid number. Your weight is ' + weight + ' kilograms.');
    calculateBMR();
    tableOutput();
  }

  function calculateBMR() {
    userBMR = weight * bmrMultiplier;
    console.log('Gender is ' + gender);
    console.log('Your weight is ' + weight + ' kilograms.');
    console.log("userBMR is " + userBMR);
  }

}


function tableOutput() {

  var body = document.body,
  tbl  = document.createElement('table');
  tbl.style.width  = '100px';
  tbl.style.border = '1px solid black';

  for (kph = 0; kph < 13; kph++) { 

    var tr = tbl.insertRow();

    for (hr = .25; hr < 2.75; hr = (hr + .25)) { 
      caloriesBurned = weight * kph * hr;
      console.log('kph is ' + kph + ' hours is ' + hr + ' calories burned is ' + caloriesBurned);

      var td = tr.insertCell();
      td.appendChild(document.createTextNode('Cell'));
      td.style.border = '1px solid black';


    }

  }

  body.appendChild(tbl);

}



genderInput();

var-bmr乘法器；
var-userBMR；
函数genderInput（）{
性别=提示（“请输入您的性别，注意答案区分大小写，必须严格按照如下所示输入：\n\nF:for Female\nM:for Male\n”）；
开关（性别）{
案例“M”：
console.log（'性别是'+性别）；
BMR倍增管=26.4；
权重输入（）；
打破
案例“F”：
console.log（'性别是'+性别）；
BMR倍增管=24.2；
权重输入（）；
打破
违约：
警报（“这不是一个正确的选择”）；
document.write（'请刷新页面重试'）；
console.log（'default'）；
}
}
//设置第二个用户提示，并根据用户选择设置难度值
函数weightInput（）{
weight=parseInt（提示（“请以千克为单位输入您的体重”）；
console.log（'重量为'+重量）；
如果（isNaN（重量））{
log（'这不是一个数字'）；
警告（“这不是一个有效的重量，请以千克为单位输入您的重量”）；
权重输入（）；
}否则{
console.log（'这是一个有效的数字。您的体重是'+weight+'公斤'）；
计算bmr（）；
tableOutput（）；
}
函数calculateBMR（）{
userBMR=重量*bmr乘法器；
console.log（'性别是'+性别）；
console.log（'您的体重为'+体重+'千克'）；
log（“userBMR是”+userBMR）；
}
}
函数tableOutput（）{
var body=document.body，
tbl=document.createElement（'table'）；
tbl.style.width='100px'；
tbl.style.border='1px纯黑'；
对于（kph=0；kph<13；kph++）{
var tr=tbl.insertRow（）；
对于（hr=.25；hr<2.75；hr=（hr+.25））{
燃烧的卡路里=重量*kph*hr；
console.log（'kph为'+kph+'小时为'+hr+'燃烧的卡路里为'+燃烧的卡路里]）；
var td=tr.insertCell（）；
td.appendChild（document.createTextNode（'Cell'））；
td.style.border='1px纯黑'；
}
}
附肢儿童（tbl）；
}
genderInput（）；

错误的原因是“body”变量为空。由于它是NULL，所以它没有appendChild方法

为什么？

因为在您运行脚本时（我假设它是外部脚本，并且您已经提供了整个脚本），还没有BODY标记

在提供的代码末尾，您立即调用了函数genderInput（带有（）符号）。这样，脚本就不会等待整个HTML页面完成加载并运行。而且，正如您所猜测的，它将在HTML到达body标记之前运行（因为您可能会将脚本标记放在HTML头中）

如何修复它？

最简单和最简单的方法是：

window.onload = genderInput //there are no () symbol

---

此代码将等待窗口（网页）完成加载，然后再运行genderInput函数

您能告诉我在哪里调用函数tableOutput吗？当然，我在else语句下的weightInput（）函数中调用tableOutput函数这是您的全部javascript吗？或者你还有什么没有复制的吗？Firefox和Opera需要一个带有

insertCell（index）

和

insertRow（index）

的索引，所以如果你用其中一个测试你的代码，这可能是一个原因。@TreeNguyen这是我的整个Javascript非常感谢，总是简单的事情让我着迷haha@KyleBingnp:D.很高兴有帮助：）