2

これらの結果をページの関数に表示しようとすると、エラーが返されます。エラー: プロパティ 'innerHTML' の値を設定できません: オブジェクトが null または未定義です

スクリプトは機能しますが、私のものではありません。オンラインで見つけた実用的な例からそれらを取得しました。

EDITEDL：変更しましたが、それでも同じエラーが発生します

<!DOCTYPE html>
<html>
<head>
    <style>
        #header {
            font-size: 5em;
        }
    </style>

    <script type="text/javascript">

        function updateclock() {
            var currentTime = new Date();

            var currentHours = currentTime.getHours();
            var currentMinutes = currentTime.getMinutes();
            var currentSeconds = currentTime.getSeconds();

            // Pad the minutes and seconds with leading zeros, if required
            currentMinutes = (currentMinutes < 10 ? "0" : "") + currentMinutes;
            currentSeconds = (currentSeconds < 10 ? "0" : "") + currentSeconds;

            // Choose either "AM" or "PM" as appropriate
            var timeOfDay = (currentHours < 12) ? "AM" : "PM";

            // Convert the hours component to 12-hour format if needed
            currentHours = (currentHours > 12) ? currentHours - 12 : currentHours;

            // Convert an hours component of "0" to "12"
            currentHours = (currentHours == 0) ? 12 : currentHours;

            // Update the time display
            document.getElementById("clock").innerHTML = (currentHours + ":" + currentMinutes + ":" + currentSeconds + " " + timeOfDay);
        }

        function updatedate() {

            var d_names = new Array("Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday");

            var m_names = new Array("January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December");

            var d = new Date();
            var curr_day = d.getDay();
            var curr_date = d.getDate();
            var sup = "";
            if (curr_date == 1 || curr_date == 21 || curr_date == 31) {
                sup = "st";
            }
            else if (curr_date == 2 || curr_date == 22) {
                sup = "nd";
            }
            else if (curr_date == 3 || curr_date == 23) {
                sup = "rd";
            }
            else {
                sup = "th";
            }
            var curr_month = d.getMonth();
            var curr_year = d.getFullYear();

            document.getElementById("date").innerHTML = (d_names[curr_day] + " " + curr_date + "<SUP>" + sup + "</SUP> " + m_names[curr_month] + " " + curr_year);

        }

        updateclock();
        setInterval(updateclock, 1000);

        updatedate();
        setInterval(updatedate, 1000);

    </script>

</head>
<body>
    <table>
        <tr>
            <td>

            </td>
            <td style="text-align=center" id =header>

            </td>
            <td>
                <span id="date">&nbsp;</span>
                <span id="clock">&nbsp;</span>
            </td>
        </tr>
    </table>
</body>
</html>
4

5 に答える 5

2

まず、＃を削除します

document.getElementById("date")

あなたはjQueryではなく、純粋なjavascriptを使用しています。

次に、電話すると

    updatedate();
    setInterval(updatedate, 1000);

HTMLコードはまだ初期化されていません。

イベントで呼び出す必要があります。たとえば、本文のonLoadです。

<body onLoad="updatedate();setInterval(updatedate, 1000);">

または、実行するすべてのコードを取得して、関数に入れます。

function runAtStart()
{
        // Put here all the code you want to launch when page loaded
        updateclock();
        setInterval(updateclock, 1000);
}

そして、マークアップに追加します：

<body onLoad="runAtStart();">

最後のアイデアは、おそらくより良い方法ですが、関数の呼び出しを本文の最後にあるスクリプトに入れます（すべてのHTMLコードが初期化されます）：

<body>
<table>
    <tr>
        <td>

        </td>
        <td style="text-align=center" id =header>

        </td>
        <td>
            <span id="date">&nbsp;</span>
            <span id="clock">&nbsp;</span>
        </td>
    </tr>
</table>
<script language="javascript>
    updatedate();
    setInterval(updatedate, 1000);    </script>
</body>
于 2013-02-05T15:15:46.633 に答える
2

問題は、DOM の準備が整う前にイニシャルupdateclock()とupdatedate()関数が呼び出されることです。次のように考えてください。

  1. ブラウザがページをロードします。
  2. <script>タグにヒットし、JavaScript の実行を開始します。
  3. 関数を実行し、DOM から項目を取得しようとします (つまりdocument.getElementById("date"))。この要素はまだロードされていないため、null を返します。オブジェクトが存在しない場合、それを呼び出すことはできません.innerHTML。

これを修正するには、ロード時にスクリプトを実行する必要があります。jQuery では、次のようになります。

$(function() {
    updateclock();
    setInterval(updateclock, 1000);

    updatedate();
    setInterval(updatedate, 1000);
}

それ以外の場合は、それらを関数に入れてから、onload="functionName()"属性を body タグに追加できます。

さらに、他の人が言及したよう#に、ID に s をドロップする必要があります。

于 2013-02-05T15:16:15.240 に答える
2

交換

document.getElementById("#date")
//And
document.getElementById("#clock")

と

document.getElementById("date")
//And
document.getElementById("clock")

getElementByIdハッシュタグ ( ) は必要ありません。これは、探している#ものであることを指定するために CSS セレクターが使用するものです。 （ピリオド（）は授業のように）id
.

また、HTML からハッシュタグを削除します。

<span id="date">&nbsp;</span>
<span id="clock">&nbsp;</span>

それ以外の：

<span id="#date">&nbsp;</span>
<span id="#clock">&nbsp;</span>
于 2013-02-05T15:10:31.423 に答える
1

まだ作成されていないオブジェクトを更新しようとしています...

テストのために、JavaScriptをテーブルの下に移動するだけです..

<table>
    <tr>
        <td>

        </td>
        <td style="text-align=center" id =header>

        </td>
        <td>
            <div id="date">&nbsp;</div>
            <div id="clock">&nbsp;</div>
        </td>
    </tr>
</table>
<script type="text/javascript">

    function updateclock() {
        var currentTime = new Date();

        var currentHours = currentTime.getHours();
        var currentMinutes = currentTime.getMinutes();
        var currentSeconds = currentTime.getSeconds();

        // Pad the minutes and seconds with leading zeros, if required
        currentMinutes = (currentMinutes < 10 ? "0" : "") + currentMinutes;
        currentSeconds = (currentSeconds < 10 ? "0" : "") + currentSeconds;

        // Choose either "AM" or "PM" as appropriate
        var timeOfDay = (currentHours < 12) ? "AM" : "PM";

        // Convert the hours component to 12-hour format if needed
        currentHours = (currentHours > 12) ? currentHours - 12 : currentHours;

        // Convert an hours component of "0" to "12"
        currentHours = (currentHours == 0) ? 12 : currentHours;

        // Update the time display
        document.getElementById("clock").innerHTML = (currentHours + ":" + currentMinutes + ":" + currentSeconds + " " + timeOfDay);
    }

    function updatedate() {

        var d_names = new Array("Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday");

        var m_names = new Array("January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December");

        var d = new Date();
        var curr_day = d.getDay();
        var curr_date = d.getDate();
        var sup = "";
        if (curr_date == 1 || curr_date == 21 || curr_date == 31) {
            sup = "st";
        }
        else if (curr_date == 2 || curr_date == 22) {
            sup = "nd";
        }
        else if (curr_date == 3 || curr_date == 23) {
            sup = "rd";
        }
        else {
            sup = "th";
        }
        var curr_month = d.getMonth();
        var curr_year = d.getFullYear();

        document.getElementById("date").innerHTML = (d_names[curr_day] + " " + curr_date + "<SUP>" + sup + "</SUP> " + m_names[curr_month] + " " + curr_year);

    }

    updateclock();
    setInterval(updateclock, 1000);

    updatedate();
    setInterval(updatedate, 1000);

</script>

そしてそれはうまくいくでしょう。（公正なDOM IDは文字で始まる必要があるため、＃を削除しました）スクリプトをヘッダーに保持したいので、DOMが完全に構築された後に呼び出されるonLoad関数を含めるように編集する必要があります。

[編集] くそー遅すぎる;)

于 2013-02-05T15:46:26.867 に答える