Can anyone help me with why this JavaScript is not writing to the definition list in the body? When I debug, the object is there and the lines are all executed. Also, if I use document.write the information will overwrite the page. I'm just having trouble with adding this HTML to the predefined definition list. There are no errors in the console. Any help is appreciated.
Javascript in head
function writeGph(obj, chartNum) {
var data = obj;
for (i = 0; i < obj.tab1.length; i++) { //Loop to create each column of the graph
document.getElementById(chartNum).innerhtml += '<dt>' + data.tab1[i].name + '</dt>'
document.getElementById(chartNum).innerhtml += '<dd class="p100"><span><b>' + data.tab1[i].top + '</b></span></dd>'
document.getElementById(chartNum).innerhtml += '<dd class="sub p' + data.tab1[i].bot + '"><span><b>' + data.tab1[i].bot + '</b></span></dd>';
console.log(data.tab1[i].top);
}
}
function writeAxis(obj, axisNum) {
for (i = 0; i < obj.tab1.length; i++) { //Loop to create each x-axis label
document.getElementById(axisNum).innerhtml += '<li>' + obj.tab1[i].name + '</li>';
}
}
function writeTable(obj, tableNum) {
document.getElementById(tableNum).innerhtml += '<tr><th>Business</th><th>Number</th><th>Percent</th></tr>';
for (i = 0; i < obj.tab1.length; i++) { //Loop to fill in table information
obj.tab1[i].botl = Math.round(10000 * (obj.tab1[i].num / obj.tab1[i].all)) / 100;
document.getElementById(tableNum).innerhtml += '<tr><td>' + obj.tab1[i].name + '</td><td>' + obj.tab1[i].num + '</td><td>' + obj.tab1[i].botl + '%</td></tr>';
}
}
HTML in body
<dl class="chart" id="chart1"></dl>
<ul class="xAxis" id="xAxis1"></ul>
<table id="table1"></table>