Почему не работает javacript код? Идущие часы на сайте

Question

Всем здравствуйте!
Делаю часы на сайте, показывающие реальное время. Цифры в виде изображений.
Вот код

<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 3.2//RU">
<HTML>
    <HEAD>
        <META HTTP-EQUIV="CONTENT-TYPE" CONTENT="text/html; charset=UTF-8">
        <TITLE>Лабораторная работа 7</TITLE>
        <script type="text/javascript">
            var half_day;
            var day_am = "image/time/day_am.gif";
            var day_pm = "image/time/day_pm.gif";
            var img = new Array("image/time/img0.gif", "image/time/img1.gif", "image/time/img2.gif", 
                                "image/time/img3.gif", "image/time/img4.gif", "image/time/img5.gif", 
                                "image/time/img6.gif", "image/time/img7.gif", "image/time/img8.gif", 
                                "image/time/img9.gif");

            function extract(type, hr, min, sec) 
            {
                if (hr<=9) {
                    document.getElementById("h10").src=img[0];
                    document.getElementById("h1").src=img[hr]; }
                else {
                    document.getElementById("h10").src=img[Math.floor(hr/10)];
                    document.getElementById("h1").src=img[hr%10]; }
                if (min<=9) {
                    document.getElementById("m10").src=img[0];
                    document.getElementById("m1").src=img[min]; }
                else {
                    document.getElementById("m10").src=img[Math.floor(min/10)];
                    document.getElementById("m1").src=img[min%10]; }
                if (sec<=9) {
                    document.getElementById("s10").src=img[0];
                    document.getElementById("s1").src=img[sec]; }
                else {
                    document.getElementById("s10").src=img[Math.floor(sec/10)];
                    document.getElementById("s1").src=img[sec%10]; }
                if (type=="AM") 
                    document.getElementById("hday").src=day_am;
                else 
                    document.getElementById("hday").src=day_pm;
            }

            function show() 
            {
                var time = new Date();
                var hours = time.getHours();
                var minutes = time.getMinutes();
                half_day="AM";
                if ((hours>=12)&&(minutes>=1)||(hours>=13)) {
                    half_day = "PM";
                    hours -= 12;
                }
                if (hours==0) 
                    hours = 12;
                extract(half_day, hours, minutes, time.getSeconds());
                setTimeout("show()", 1000)
            }

            show();
        </script>
    </HEAD> 
    <body>
        <div>
            <img src="image/time/img0.gif" id="h10" alt="">
            <img src="image/time/img0.gif" id="h1" alt="">
            <img src="image/time/colon.gif" alt="">
            <img src="image/time/img0.gif" id="m10" alt="">
            <img src="image/time/img0.gif" id="m1" alt="">
            <img src="image/time/colon.gif" alt="">
            <img src="image/time/img0.gif" id="s10" alt="">
            <img src="image/time/img0.gif" id="s1" alt="">
            <img src="image/time/day_am.gif" id="hday" alt="">
        </div>
    </body>
</HTML>

Начальное положение часов прогружается, но скрипт не работает.
При открытии в браузере в консоли вот такое сообщение:
index.html:21 Uncaught TypeError: Cannot set property 'src' of null
at extract (index.html:21)
at show (index.html:53)
at index.html:57
В этой строчке

document.getElementById("h10").src=img[Math.floor(hr/10)];

Подскажите, почему так происходит?

Answer 1

Потому что когда Вы первый вызываете функцию show, никаких элементов на странице еще нет.

        //show();
        window.addEventListener("load", show);
    </script>

БЛОГ НА HUSL

Почему не работает javacript код? Идущие часы на сайте

Ответы (1 шт):