0

I am creating a video player with dashjs. I seem to get the error "Uncaught ReferenceError: Invalid left-hand side in assignment on element attribute" when I try to add a data attribute to my function for creating the <video> element inside my video-container element.

    function createVideoElement() {
        videoElement = document.createElement("video");
        videoElement.id = "video";
        videoContainer = document.getElementById("video-container");
        videoElement.autoplay = false;
        videoElement.src = "";
        videoElement.controls = true;
        videoElement.data-video-id = window.datavideoId;
        videoContainer.appendChild(videoElement);
        window.addEventListener('popstate', onBackNav);
        return videoElement;
    }

The error occurs at:-

videoElement.data-video-id = window.datavideoId;

Ok, so it doesn't like my "data-video-id". If I remove the data-video-id line, the <video> element is created with the appropriate attributes. How else can I do this without getting this error?

Mr Lister
  • 45,515
  • 15
  • 108
  • 150
Grant G
  • 386
  • 1
  • 6
  • 19

1 Answers1

2

You can not use - as a part of variable name, because it is interpreted as minus (Subtraction) operator.

To fix this, you can try videoElement['data-video-id'] = window.datavideoId; or better videoElement.setAttribute('data-video-id', window.datavideoId);

Dan Cantir
  • 2,915
  • 14
  • 24
  • 1
    Yep, I figured it out just as you posted this. videoElement.setAttribute('data-video-id', window.datavideoId); works perfectly. Thanks! – Grant G Apr 07 '17 at 11:03