I cant get the contents of array when hovering on "members in this group" span

#members {
position: relative;
display: inline-block;
}
#members-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow:0px 8px 16px 0px rgba(0,0,0,0.2);
padding: 12px 16px;
z-index: 1;
}
#members:hover #members-content {
display: block;
}
<form>
    Group Name:
    <t>
    <input type="text">
    <button  name="joingrp"type="submit">Join Group</button>
</form>
<div id="members">
<span>Members in this group</span>
<div id="members-content">
</div>
<script>
    var memberarray=["member1","member2", "member3","member4"];
        document.getElementById("members-content").innerhtml=memberarray;
</script>

I cant get the contents of array when hovering on "members in this group" span.i cant effectively use the document.getElementById function.

>Solution :

Use innerHTMl where ‘HTML’ is in uppercase

var memberarray=["member1","member2", "member3","member4"];
        document.getElementById("members-content").innerHTML=memberarray;

#members {
position: relative;
display: inline-block;
}
#members-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow:0px 8px 16px 0px rgba(0,0,0,0.2);
padding: 12px 16px;
z-index: 1;
}
#members:hover #members-content {
display: block;
}

<form>
    Group Name:
    <t>
    <input type="text">
    <button  name="joingrp"type="submit">Join Group</button>
</form>
<div id="members">
<span>Members in this group</span>
<div id="members-content">
</div>