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

getElementsByTagName不是函数。 getElementsByTagName虽然：）

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

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

1 个答案: