JS调用this.getAttribute提示不是函数，传入this仍无效如何解决？

浏览器提示this.getAttribute不是函数，我在Stack上看到过类似的帖子，题主被告知要给函数传入this，但这个方案对我无效，相关代码片段如下：

function reveal()
{
    this.src = "img/" + this.getAttribute("data-value") + ".png";
}

function display_cards(cards, n)
{
    for (i = 0; i < cards.length; i++)
    {
        if (i % n == 0)
        {
            document.getElementById("container").innerHTML += '<br/>';
        }
        document.getElementById("container").innerHTML += '<img src="img/back.png" class="card" onclick="reveal(this)" data-value="'+cards[i]+'"/>';
    }
}

问题根因 #

你在onclick属性中已经把当前点击的img元素作为参数传入reveal函数，但reveal没有定义形参接收这个参数，此时函数内部的this默认指向全局window对象，window不存在getAttribute方法，因此抛出错误。

修复方案 #

有两种常用修复方式，选其一即可：

方案1：接收传入的DOM元素参数（更推荐，逻辑更直观）

修改reveal函数定义，新增形参接收传入的元素，直接用参数操作DOM：

function reveal(el)
{
    el.src = "img/" + el.getAttribute("data-value") + ".png";
    // 也可以用更简洁的dataset属性取值：el.dataset.value
}

// display_cards函数无需修改
function display_cards(cards, n)
{
    for (i = 0; i < cards.length; i++)
    {
        if (i % n == 0)
        {
            document.getElementById("container").innerHTML += '<br/>';
        }
        document.getElementById("container").innerHTML += '<img src="img/back.png" class="card" onclick="reveal(this)" data-value="'+cards[i]+'"/>';
    }
}

方案2：绑定函数执行上下文，保留this写法

如果不想修改reveal函数的内部逻辑，可以修改onclick的调用方式，把当前元素绑定为reveal执行时的this对象：

function reveal()
{
    this.src = "img/" + this.getAttribute("data-value") + ".png";
}

function display_cards(cards, n)
{
    for (i = 0; i < cards.length; i++)
    {
        if (i % n == 0)
        {
            document.getElementById("container").innerHTML += '<br/>';
        }
        // 用call方法绑定this指向
        document.getElementById("container").innerHTML += '<img src="img/back.png" class="card" onclick="reveal.call(this)" data-value="'+cards[i]+'"/>';
    }
}

内容的提问来源于stack exchange，提问作者Hellmick