Using style.display triggered by date

Brand new here so apologies for any breaks of protocol. Can anyone see what I've done wrong?

I have divs called "1st" "2nd" "3rd" etc and I'm trying to create an advent calendar format where the content of each day's div is only visible when the date arrives.

Below test case using dates 6th-8th but the divs remain always visible.

Quite new to JS so any help appreciated!

<script type = "text/javascript">

function myFunction() {

var num = new Date().getDate(); //today's date as number

if ((num <= 6)) {
    document.getElementById('6th').style.display = "none";
}
if ((num <= 7)) {
    document.getElementById('7th').style.display = "none";
}
if ((num <= 8)) {
    document.getElementById('8th').style.display = "none";
}

}