Generate Table using Javascript

Question

I am trying to generate a table based on two loops I have running.

Right now I am just trying to get the table to generate, but keep getting this error:

Cannot read property 'appendChild' of null.

the line of code it is referring to is this:

body.appendChild(tbl);

but I'm not sure why tbl cannot be properly appended. Any help would be greatly appreciated.

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();

Answer 1

The reason for your error is because the "body" variable is NULL. And since it's NULL, it doesn't have the method appendChild.

Why?

Because at the time you run the script (I assume that it's external script and you have provided the whole script), there are no BODY tag yet!!!

At the end of the code you have provided, you called the function genderInput right away (with the () symbol). By doing this, your script will not wait for the whole HTML page to finish loading and run. And, as you can guess, it will run before the HTML get to the body tag (since you might put the script tag in HTML header)

How to fix it?

The simplest and easiest way is:

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

This code will wait for your window (webpage) to finish loading before running the genderInput function