How to create html with JavaScript? Uncaught TypeError: Cannot set property 'innerHTML' of null -

i want create date/time under weeks, in columns this:

mon       tuesday...... 

and want in row shown date/time 9 until 5 pm. this:

mon       tuesday 09:00 09:30 . . . . 

i not sure doing wrong. have 2 arrays

var days = [   'monday',   'tuesday',   'wednesday',   'thursday',   'friday' ];  var hours = [   '09:00',   '09:30',   '10:00',   '10:30',   '11:00',   '11:30',   '12:00',   '12:30',   '13:00',   '13:30',   '14:00',   '14:30',   '15:00',   '15:30',   '16:00',   '16:30',   '17:00' ]; 

i made days shown inline next each other javascript, can't make work time:

function createtable(roomname) {     var table = '';     //for loop days     (var = 0; < days.length; i++) {         //checking if value  monday         if (i === 0) {             table = table +  '<div class="indays"> <h2>' + days[i] + '</h2>';         } else {             table = table +  '<div class="indays nxt"> <h2>' + days[i] + '</h2>';         }         table = table + '</div>';     } document.getelementbyid('days').innerhtml = table;     var hrs = '';     (var z = 0; z < hours.length; z++) {         if (z === 0) {             hrs = hrs + '<div id="hr"> <span>' + hours[z] + '</span>';         } else {             hrs = hrs + '<div id="hr"> <span>' + hours[z] + '</span>';         }         hrs = hrs + '</div>';     } document.getelementbyid('hr').innerhtml = hrs; } 

i have javascript before closing body tag, , have hr id in html.

<div class="hours" >     <div id="hr">      </div> </div> 

what doing wrong?

there no #days element in dom

createtable();    function createtable(roomname) {    var days = [      'monday',      'tuesday',      'wednesday',      'thursday',      'friday'    ];      var hours = [      '09:00',      '09:30',      '10:00',      '10:30',      '11:00',      '11:30',      '12:00',      '12:30',      '13:00',      '13:30',      '14:00',      '14:30',      '15:00',      '15:30',      '16:00',      '16:30',      '17:00'    ];      var table = '';    (var = 0; < days.length; i++) {      if (i === 0) {        table = table + '<div class="indays"> <h2>' + days[i] + '</h2>';      } else {        table = table + '<div class="indays nxt"> <h2>' + days[i] + '</h2>';      }      table = table + '</div>';      }    document.getelementbyid('days').innerhtml = table;    var hrs = '';    (var z = 0; z < hours.length; z++) {      if (z === 0) {        hrs = hrs + '<div id="hr"> <span>' + hours[z] + '</span>';      } else {        hrs = hrs + '<div id="hr"> <span>' + hours[z] + '</span>';      }      hrs = hrs + '</div>';    }    document.getelementbyid('hr').innerhtml = hrs;  }

<div class="hours">    <div id="days">    </div>  </div>    <div class="hours">    <div id="hr">    </div>  </div>

simplified code:

createtable();    function createtable(roomname) {    var days = [      'monday',      'tuesday',      'wednesday',      'thursday',      'friday'    ];      var hours = [      '09:00',      '09:30',      '10:00',      '10:30',      '11:00',      '11:30',      '12:00',      '12:30',      '13:00',      '13:30',      '14:00',      '14:30',      '15:00',      '15:30',      '16:00',      '16:30',      '17:00'    ];      var table = '';    (var = 0; < days.length; i++) {      if (i === 0) {        table += '<div class="indays"> <h2>' + days[i] + '</h2></div>';      } else {        table += '<div class="indays nxt"> <h2>' + days[i] + '</h2></div>';      }    }    document.getelementbyid('days').innerhtml = table;    var hrs = '';    (var z = 0; z < hours.length; z++) {      if (z === 0) {        hrs += '<div id="hr"> <span>' + hours[z] + '</span></div>';      } else {        hrs += '<div id="hr"> <span>' + hours[z] + '</span></div>';      }    }    document.getelementbyid('hr').innerhtml = hrs;  }

.nxt {    color: green  }

<div class="hours">    <div id="days">    </div>  </div>    <div class="hours">    <div id="hr">    </div>  </div>