当光标悬停在 HTML5 画布上的图像上时，将脚本添加到网页以更改段落的内容

Question

我有一个 HTML5 画布，它显示了许多图像。我的画布下方的页面上还有一些简单的 HTML <p></p> 标签。

当光标悬停在这些图像上时，我想更新<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 事件在我将光标悬停在添加了它的图像上时似乎没有触发 - 知道这是为什么吗？

Answer 1

getElementByTagName 不是函数。 getElementsByTagName 是虽然:)

它是复数，因为它返回与给定标签匹配的每个元素。