The error message "Uncaught ReferenceError: Attempting to assign to a non-reference value in the attribute

While working on my video player using dash.js, I encountered an error message saying "Uncaught ReferenceError: Invalid left-hand side in assignment on element attribute" when attempting to include a data attribute in my function for generating the <video> element within the 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 problematic line is:-

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

Removing the data-video-id line allows for the creation of the <video> element with all necessary attributes. Any suggestions for incorporating this data attribute without triggering the error?

javascript

Answer №1

Avoid using - in variable names, as it could be mistaken for a subtraction operator.

To resolve this issue, consider using 

videoElement['data-video-id'] = window.datavideoId;
or alternatively, use 
videoElement.setAttribute('data-video-id', window.datavideoId);

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Integrating eBay API with Node.js

Hello, I am new to Node.js and I could really use some assistance with exporting console log data to an HTML page. I came across a helpful example on GitHub at this link: https://github.com/benbuckman/nodejs-ebay-api My current issue is that although I h ...

javascriptnode.jsbrowsernpmebay-api

The AngularJS modal is sending back the results before updating the parent scope

When launching a modal from my web page, I am updating an array passed from the parent. However, when closing the modal and sending back the updated results, the parent scope object is also being updated. If the user decides not to update and cancels the ...

javascriptangularjstwitter-bootstrapangular-ui-bootstrap

Retrieving ID of an element to be animated with jQuery

I have a sprite image that changes background position when hovered over, and while it's currently working, I'm looking for a more efficient way to achieve this. I need to apply this effect to several images and am exploring ways to avoid duplica ...

javascriptjqueryjquery-animategetelementbyid

When Vue 3 is paired with Vite, it may result in a blank page being rendered if the

Issue with Rendering Counter in Vite Project After setting up a new project using Vite on an Arch-based operating system, I encountered a problem when attempting to create the simple counter from the Vue documentation. The element does not render as expec ...

javascripthtmlvue.jsvuejs3vite

Loading images in advance using jCarousel

I need help with preloading images on a jCarousel that loads a JSON feed and generates necessary HTML. Can anyone suggest a way to accomplish this task efficiently? $(".banner ul").jcarousel({ itemLoadCallback:loadTopBanner, auto: 6, wrap: ...

javascriptjqueryjcarousel

Is it possible for an "object" to remain in existence even after an attempt to delete it?

Is there a proper method to eliminate an instance of a "class" in JavaScript? I am using node to "require" my classes and their prototypes. Interestingly, setting the instance of the class to equal null does not appear to actually destroy the instance. Fo ...

javascriptnode.js

Form Automatically Submits Data Upon Loading of Page

I am currently facing an issue with my hidden div that is being loaded when I click the submit button. The form is sending results upon page load, and even though I have included the validateForm() function and called it at the end of the submit function ...

javascriptphpjqueryforms

Ways to align div elements

I am currently in the process of developing my own custom animation player. Utilizing Three.js for object rendering has been successful so far. However, the challenge lies in incorporating control options at the bottom of the player interface (such as play ...

javascriptjqueryhtmlcss

Angular's innerHTML dilemma

Within my Angular service, I have implemented three methods as shown below: public loadLiveChat() { let url: string; url = this.appConfig.config.liveAgent.liveAgentScriptUrl; this.dynamicallyLoadScript(url); ...

javascriptangularinnerhtml

The input box is not properly filled with the complete string using protractor sendKeys

[HTTP] --> POST /wd/hub/session/ffcd7072-9f96-45cb-a61d-ec53fc696b56/element/0.9513211246393813-32/value {"value":["1","0","0","0","1"],"text":"10001"} My JavaScript code snippet: this.zipcode = element(by.model('personalInfo.zipcode')); t ...

javascriptseleniumprotractor

Using a JavaScript variable inside a jQuery string

Does anyone have suggestions for what I may be doing incorrectly here? VIEW DEMO HTML Code <div id="usercurrentccbox"> <div class="cardChoice"> <label for="mastercard"></label> </div> </div> JQUERY Sc ...

javascriptjqueryvariables

Executing npm scripts in Node.js

Trying to move away from using the likes of Grunt or Gulp in my projects, I've been exploring npm-scripts as a potential replacement. While npm-scripts makes use of `package.json`, I've found that more advanced build processes require command lin ...

javascriptnode.jsscriptingnpm

Ways to retrieve parameters in getStaticPaths function?

I'm currently working on a Next.js app with Contentful as the CMS. The file structure relevant to my question is: pages -[category] -[slug].js My goal is to access the category value when a user visits category/slug. Currently, I have the category ...

javascriptnext.js

Adding an icon to indicate that the last reading date is over 24 hours old - how to do it!

Within my HTML, I have the following code snippet: {{hsParametersLastRead.readingDate | date:'medium'}} In my controller, I am using this code: $http.get(hsParametersLastReadEndpoint).success(function (hsParametersLastRead) { $ ...

javascripthtmlangularjs

One-time export feature similar to Typescript's export_once functionality

When I have the following code structure: File1.ts function someFunction(){...} export default someFunction(); and then File2.ts import File1 from "./File1"; File3.ts import File1 from "./File1"; My question is, will the export de ...

javascripttypescriptnode-modules

Combining URLs in Angular 6 - A Step-by-Step Guide

How can I concatenate the commonUrl from CommonClass in Angular 6 for category.service.ts? common-class.ts export class CommonClass { constructor(public commonUrl : string = 'http://localhost:3000'){}; } category.service.ts import { CommonC ...

javascriptstringtypescript

The onChange function is not triggered when the dropdown menu consists of only one item

I am facing an issue with my dynamically populated dropdown menu. When the dropdown contains only one element, the onChange() function of my select tag does not work as expected. It functions perfectly fine when there are multiple elements present. How c ...

javascripthtmlreactjs

Insert a hyperlink into a button through Javascript by modifying the window

For my text adventure game, I need one of the option buttons to act as a hyperlink that directs players to another webpage. Currently, my code looks like this: <article> <div id="text"></article> </div> <input id=" ...

javascripthtmlbuttonhyperlink

Guide to retrieve the Last-Modified date using Javascript

It is common knowledge that the document.lastModified function returns a string containing the date and time when the current document was last modified. Is it possible to obtain the Last-Modified for a script? Here is an example of HTML code: ... <s ...

javascriptajaxhttp

Controllers governing adult and juvenile entities

When working with two controllers, one as the parent and the other as the child. <div ng-controller="firstCtrl as first"> <div ng-controller="secondCtrl as second"></div> </div> JS: app.controller('firstCtrl', functi ...

javascriptangularjscontrollerseparation-of-concerns