Question

我已经建立了一个音板网站，其中包含许多小型音频剪辑和下面的Javascript，可以在播放完成后暂停，重置它们。该页面可以正常运行，但是我得到了

index.html：90未捕获的TypeError：无法读取null的属性'getAttribute'

我的Javascript控制台出现错误，我也不知道为什么。

cliplist = ['audio1','audio2','audio3','audio4','audio5','audio6','audio7','audio8'];
playerlist = ['player1','player2','player3','player4','player5','player6','player7','player8'];

document.addEventListener("DOMContentLoaded", function() 
{
    for(let i=0;i<cliplist.length;i++)
    {
        document.getElementById(playerlist[i]).addEventListener("click", function()
        {
            playClip(cliplist[i]);
        })

        document.getElementById(playerlist[i]).addEventListener("click", function()
        {
            playClip(cliplist[i],playerlist[i]);
        })

                document.getElementById(cliplist[i]).addEventListener("ended", function()
        {
            reset(playerlist[i]);
        })
    }
});

function playClip(theclip,theplayer)
{
    playerElement = document.getElementById(theplayer);
    clipElement = document.getElementById(theclip)

    if(playerElement.getAttribute("src") == 'playbutton.png')
    {
        playerElement.setAttribute("src","pausebutton.png");
        clipElement.play();
    }
    else
    {
        playerElement.setAttribute("src","playbutton.png");
        clipElement.pause();        
    }

}

function reset(theplayer)
{
    document.getElementById(theplayer).src = 'playbutton.png';  
}

Answer 1

您有一个playClip的电话，看起来像这样：

playClip(cliplist[i]);

它仅传递一个参数。但是，playClip()需要第二个参数，这就是.getElementById()所使用的参数，它获取调用.getAttribute()的DOM元素。如果不传递参数，则不会获得DOM元素，并且会出现错误。

因此，请确保将您要查找的两个参数传递给它，就像您编写的另一点一样：

playClip(cliplist[i],playerlist[i]);

最后，它仍然有效的原因是因为您要向click添加两个document.getElementById(playerlist[i])事件处理程序。第一个抛出错误，第二个起作用。

捕获TypeError：无法读取null的属性“ getAttribute”，但代码可以正常工作

1 个答案: