Date time format changes when browser viewport is being resize

Question

Scenario is:

I have a displayed full live datetime in javascript including name of the day. However that format consumes too much space when the viewport is being resized so my solution is to change the format (make it shorter) if the screen size is smaller.

It goes like this:

When the user has a very wide screen I'd like to provide her/him the full datetime and day like this:

"23:34:39 - October 3, 2019 - Thursday"

When the user is using a tablet format should be:

"23:34:39 - Oct 3, 2019 - Thu"

And when the user is on mobile or older phones which has a very small screen, the format should be:

"23:34:39 - 2019-10-03 - Thu" of if the code detects even smaller screen I will remove the seconds.

I have found several threads here about rezise(function()); here and addEventListener here also another one here so I have done some modification in my code but I can't seem to make it work, there is no display at all after I added the addEventListener.

here is my jsclock.js

    window.addEventListener("resize", function() {
    if (window.matchMedia("(min-width: 1000px)").matches) {
        function date_time(id) {

        date = new Date;
        year = date.getFullYear();
        month = date.getMonth();
        months = new Array('January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December');
        d = date.getDate();
        day = date.getDay();
        days = new Array('Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday');
        h = date.getHours();
        if(h<10)
        {
                h = "0"+h;
        }
        m = date.getMinutes();
        if(m<10)
        {
                m = "0"+m;
        }
        s = date.getSeconds();
        if(s<10)
        {
                s = "0"+s;
        }
        result = ''+h+':'+m+':'+s+' &nbsp; &#10070; &nbsp; '+months[month]+' '+d+', ' +year+' &nbsp; &#10070; &nbsp;  '+days[day]+'';
        document.getElementById(id).innerHTML = result;
        setTimeout('date_time("'+id+'");','1000');
        return true;
}
    } else if (window.matchMedia("(min-width: 800px)").matches) {
        function date_time(id) {

        date = new Date;
        year = date.getFullYear();
        month = date.getMonth();
        months = new Array('Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec');
        d = date.getDate();
        day = date.getDay();
        days = new Array('Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat');
        h = date.getHours();
        if(h<10)
        {
                h = "0"+h;
        }
        m = date.getMinutes();
        if(m<10)
        {
                m = "0"+m;
        }
        s = date.getSeconds();
        if(s<10)
        {
                s = "0"+s;
        }
        result = ''+h+':'+m+':'+s+' &nbsp; &#10070; &nbsp; '+months[month]+' '+d+', ' +year+' &nbsp; &#10070; &nbsp;  '+days[day]+'';
        document.getElementById(id).innerHTML = result;
        setTimeout('date_time("'+id+'");','1000');
        return true;
}
    } else (window.matchMedia("(min-width: 200px)").matches) {
        function date_time(id) {

        date = new Date;
        year = date.getFullYear();
        month = date.getMonth();
        months = new Array('01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12');
        d = date.getDate();
        if(d<10)
        {
                d = "0"+d;
        }
        day = date.getDay();
        days = new Array('Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat');
        h = date.getHours();
        if(h<10)
        {
                h = "0"+h;
        }
        m = date.getMinutes();
        if(m<10)
        {
                m = "0"+m;
        }
        s = date.getSeconds();
        if(s<10)
        {
                s = "0"+s;
        }
        result = ''+h+':'+m+':'+s+' &nbsp; &#10070; &nbsp; ' +year+'-'+months[month]+'-'+d+'  &nbsp; &#10070; &nbsp;  '+days[day]+'';
        document.getElementById(id).innerHTML = result;
        setTimeout('date_time("'+id+'");','1000');
        return true;
}
    }

and how I'm displaying it.

span id="date_time"></span>
<script type="text/javascript">window.onload = date_time('date_time');</script>

Answer 1

Generate the HTML for all the timestamps:

<span class="size-l date-time">nice and long datetimestamp<span>
<span class="size-m date-time">shorter datetimestamp<span>
<span class="size-s date-time">shortstamp</span>

and then hide them by default using CSS, with media queries that unhide whichever needs to be unhidden. There is no reason to use JS here at all:

.date-time { display: none; }

@media screen and (min-width: 300px) {
 .size-s .date-time { display: inline-block; }
}

@media screen and (min-width: 576px) {
 .size-m .date-time { display: inline-block; }
}

@media screen and (min-width: 800px) {
 .size-l .date-time { display: inline-block; }
}