我制作了一个音板网站，其中包含许多小音频片段和下面的 Javascript，用于播放、暂停和在播放完毕后重置它们。页面完全按预期运行，但我的 Javascript 控制台中出现

index.html:90 Uncaught TypeError: Cannot read property 'getAttribute' of null

错误，我不知道原因。

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';  
}