Solve the problem of style in cannot read property ‘style’ of null

< script type ="text/javascript" > 
        function updateTime(){
             var timeNow =  new Date();
             var hour = timeNow.getHours();
             var minute = timeNow.getMinutes();
             var second = timeNow.getSeconds();
             var millisecond = timeNow.getMilliseconds(); 

            // Get the pointer on the dial to rotate 
            var sec = document.getElementById( ' seconds ' );
            var min = document.getElementById ( " minutes " );
             var H = document.getElementById ( " hours " );
             // pointer rotation 
            sec.style.transform =  ' rotateZ ( '  + (SECOND * 360 / 60 * millisecond. 6 + / 1000 ) +  ' deg) ' ; 
            min.style.transform =  ' rotateZ( '  + (minute *360 / 60) + 'deg)'; 
            h.style.transform =  ' rotateZ ( '  + (hour * 360 / 12 is minute * 30 + / 60 ) + ' deg) ' ; 
        } 
        the setInterval ( function () { 
            updateTime () ; 
        }, 50 ) 
        updateTime(); 
        var scales = document.querySelectorAll( ' .scale ' );
         var nums = document.querySelectorAll(' .num ' );
         for ( var i =  0 ; i < scales.length;i ++ ){ 
            scales[i].style.transform =  ' rotateZ( '  + (i * 30 ) +  ' deg) translateY(- 200px) ' ; 
            nums[i].style.transform =  ' rotateZ( '  + (i *- 30 ) +  ' deg) ' ; 
        } 
    </ script >
    < div id ="all" > 
        < div class ="second" id ="seconds" ></ div > 
        < div class ="minute" id ="minutes" ></ div > 
        < div class ="hour" id ="hours" ></ div > 
        < div class ="scale" >< span class ="num" > 12 </ span ></ div > 
        < div class ="scale">< span class ="num" > 1 </ span ></ div > 
        < div class ="scale" >< span class ="num" > 2 </ span ></ div > 
        < div class ="scale" >< span class ="num" > 3 </ span ></ div > 
        < div class ="scale" ><span class ="num" > 4 </span ></ div > 
        < div class ="scale" >< span class ="num" > 5 </ span ></ div > 
        < div class ="scale" >< span class ="num" > 6 </ span ></ div > 
        < div class ="scale" >< span class ="num" > 7 </ span ></ div > 
        < div class="scale" >< span class ="num" > 8 </ span ></ div > 
        < div class ="scale" >< span class ="num" > 9 </ span ></ div > 
        < div class ="scale" >< span class ="num" > 10 </ span ></ div > 
        < div class ="scale" >< span class ="num" > 11</ span ></ div > 

    </ div >

The problem lies in the JS that is written first, and the HTML code that is written later. Therefore, when the program is executed, js is compiled first. At this time, the HTML has not been parsed, so the style attribute cannot be parsed. The solution is to put the HTML file on it. go with.

 

Similar Posts: