Moment.js Date not working on tablet

Question

I am working with my script of just displaying the date and I'm using duda platform for it however the tablet version is not working while the desktop and the mobile is just fine. My script is pasted in the end of body and I'm using moment.js

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.1/moment.min.js"></script>
<script>
//for desktop mobile display date today
window.onload = function(){
    var a = moment().format('LL');
    document.getElementById("dateToday").innerHTML = a;

//for tablet
    var b = moment().format('LL');
    document.getElementById("dateTodayTab").innerHTML = b;
}


</script>

The console says: Uncaught TypeError: Cannot set property 'innerHTML' of null. Here is my html code for desktop and tablet. I inspected the tablet element and the height was 0px while the desktop version was not. Care to point what's my mistake here?

<h4> The date today is :<span id="dateToday"></span></h4>
<h4> The date today is :<span id="dateTodayTab"></span></h4>

Answer 1

In your HTML example the span is not closed

<h4> The date today is :<span id="dateToday"></span</h4>
<h4> The date today is :<span id="dateTodayTab"></span</h4>

It should be like this:

<h4> The date today is :<span id="dateToday"></span></h4>
<h4> The date today is :<span id="dateTodayTab"></span></h4>

(Not positive that is the solution but you might start there)

Answer 2

This should work:

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.1/moment.min.js"></script>
<script type='text/javascript'>
window.onload=function(){
  var a = moment().format('LL');
  document.getElementById("dateToday").innerHTML = a;
  //for tablet
  var b = moment().format('LL');
  document.getElementById("dateTodayTab").innerHTML = b;
}
</script>
<h4>The date today is :<span id="dateToday"></span></h4>
<h4>The date today is :<span id="dateTodayTab"></span></h4>

Demo here

Answer 3

Already fixed! Thanks to @JJJ the problem is that my element in tablet was hidden so it can't be found that's why my script stops and spits out the error of Uncaught TypeError: Cannot set property 'innerHTML' of null because it doesn't exist in the tablet mode. I made a two function on my script that will execute if the user is viewing at desktop and tablet only :

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.1/moment.min.js"></script>
<script>
//for desktop mobile display date today
window.onload = function(){

    var dateverify = document.getElementById("dateToday");
    var desktopDate = function(){
        //for desktop
        var a = moment().format('LL');
        document.getElementById("dateToday").innerHTML = a;
    }
    var tabletDate = function(){
        //for tablet
        var b = moment().format('LL');
        document.getElementById("datedate").innerHTML = b;
    }
    if(dateverify !== null){
        desktopDate();
    }
    else{
        tabletDate();
    }
}
</script>

Answer 4

I think that window.onload event is fired too early, and script can't get element since it is not rendered yet. Try using

window.document.body.onload

instead.