Getting Uncaught TypeError: Cannot read property 'getAttribute' of null but code is working

Question

I have made a soundboard website which has a number of small audio clips and the below Javascript to play, pause and reset them when they are finished playing. The page works exactly as expected but I get a

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

error in my Javascript console and I have no idea why.

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

basically it tells you it cannot find one of the elements with document.getElementById(theplayer); check all the elements to see if they are there ['player1','player2','player3','player4','player5','player6','player7','player8'] — sertsedat
– sertsedat, Commented Aug 23, 2018 at 19:06

Scott Marcus · Accepted Answer · 2018-08-23 20:40:50Z

1

You have a call to playClip that looks like this:

playClip(cliplist[i]);

It only passes one argument. But, playClip() expects a second argument and that is what is used with .getElementById(), which gets a DOM element that .getAttribute() is called on. When you don't pass the argument, you don't get a DOM element and you get the error.

So, make sure that you pass it the two arguments it's looking for, like in the other spot where you wrote:

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

Lastly, the reason it still works is because you are adding two click event hanlders to document.getElementById(playerlist[i]). The first one throws the error and the second one works.

edited Aug 23, 2018 at 20:40

answered Aug 23, 2018 at 19:00

Scott Marcus

66k6 gold badges54 silver badges81 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Matt Over a year ago

Yeah, that was it. I must have looked at that code for about half an hour and failed to see I had a duplicate event listener. Thank you!

Collectives™ on Stack Overflow

Getting Uncaught TypeError: Cannot read property 'getAttribute' of null but code is working

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related