Question

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>

Answer 1

It’s not .innerhtml, it’s .innerHTML