1

多数の画像を表示しているHTML5キャンバスがあります。<p></p>また、キャンバスの下のページにいくつかの単純なHTMLタグがあります。

<p></p>カーソルがこれらの画像にカーソルを合わせたときにタグの内容を更新したいのですが、http ：//www.quirksmode.org/js/newmouseover.htmlで簡単なチュートリアルを見つけました。これを行う。

チュートリアルに従いましたが、ブラウザでページを表示すると、コンソールエラーが表示されます。

getElementByTagNameは関数ではありません

私はこれまでこの関数を見たことがなく、それが実際に事前定義された関数なのか、それともチュートリアルの作成者が自分で定義した関数なのか疑問に思っています...？そのページには作者が関数を定義したものが何も見えなかったので、事前に定義されたものかもしれないと思いましたが、よくわかりません。誰か知っている？

編集

さて、タイプミスを修正すると修正され、関数が呼び出されます。ただし、現在は関数から呼び出しているため、ページが読み込まれるとすぐに段落が更新されます。実際には、呼び出されるイベントをwindow.onload条件とはしていません。onmouseover

私のwindow.onload関数は次のようになります。

window.onload = function () {
    var sources = [];
        sources[0] = document.getElementById("building").src,
        sources[1] = document.getElementById("chair").src,
        sources[2] = document.getElementById("drink").src,
        sources[3] = document.getElementById("food").src,
        /*There are roughly 30 lines like this adding images in the same way */

        if (document.getElementById) {
            var x = document.getElementById('mouseovers')
                            .getElementsByTagName('IMG');
        } else if (document.all) {
            var x = document.all['mouseovers'].all.tags('IMG');
        } else {
            return;
        }
        for (var i = 0; i < x.length; i++) {
            console.log("for loop adding onmouseovers is being called");
            x[i].onmouseover = displayAssetDescriptionTip();
        }

    loadImages(sources, drawImage);
    drawGameElements();
    drawDescriptionBoxes();

    stage.add(imagesLayer);

};

ifステートメントをと呼ばれる関数に移動しようとしましたdisplayAssetDescriptionTip()が、この関数は次のようになります。

function displayAssetDescriptionTip() {
    if (document.getElementById) {
        var x = document.getElementById('mouseovers')
                        .getElementsByTagName('IMG');
    } else if(document.all) {
        var x = document.all['mouseovers'].all.tags('IMG');
    }else {
        return;
    }
    for (var i = 0; i < x.length; i++) {
        console.log("for loop adding onmouseovers is being called");
        x[i].onmouseover = displayAssetDescriptionTip();
    }
    document.getElementById('tipsParagraph').innerHTML = "Assets are items that"
        + " can be bought or sold for cash.";
    console.log("displayAssetDescriptionTip being called");
}

ただし、onmouseoverイベントが追加された画像にカーソルを合わせると、イベントが発生しているようには見えません。これがなぜであるかについて何か考えはありますか？

4

1 に答える 1

0

getElementByTagNameは関数ではありません。getElementsByTagNameはしかし:)

指定されたタグに一致するすべての要素を返すため、複数形です。

于 2013-02-25T21:38:04.037 に答える