Moment.js Дата не работает на планшете

Question

Я работаю с моим сценарием, просто отображая дату, и я использую платформу duda для него , однако версия планшета не работает, пока рабочий стол и мобильный телефон в порядке. Мой сценарий наклеивается в конце тела, и я использую 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> 

Консоль говорит: неперехваченный TypeError: Невозможно установить свойство «innerHTML» в нуле. Вот мой html-код для рабочего стола и планшета. Я проверил элемент планшета, а высота была 0px, в то время как настольная версия не была. Постарайтесь указать, в чем моя ошибка?

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

Answer 1

Уже исправлено! Благодаря @JJJ проблема в том, что мой элемент в планшете был скрыт, поэтому его невозможно найти, поэтому мой скрипт останавливается и выплевывает ошибку Uncaught TypeError: нельзя установить свойство «innerHTML» из null, поскольку оно не существует в в режиме планшета. Я выполнил две функции на моем скрипте, которые будут выполняться, если пользователь просматривает только на настольном и планшете:

<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 2

В вашем HTML примере промежуток не закрыт

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

Это должно быть так:

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

(Не уверен, что это решение, но вы можете начать там)

Answer 3

Я думаю, что событие window.onload запускается слишком рано, и скрипт не может получить элемент, поскольку он не отображается все же. Попробуйте использовать

window.document.body.onload 

вместо этого.

Answer 4

Это должно работать:

<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