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

insertCell(index)andinsertRow(index), so if you test your code with one of each that might be a reason.