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

#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.

CodePudding user response：

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>