The TS error states that the property 'dataset' is not a valid property for the type 'Element'

Encountering an error in the terminal during compilation in an Angular 8 environment. The localhost page navigates fine without console errors. Checked the variable with the dataset property using console.log and it reads correctly. Here's the section of code in question:


let timelineEls = document.querySelectorAll('[data-scroll-timeline]');
scroll.on("scroll", () => {
for ( let i = 0; i < timelineEls.length; i++ ) {
let progress = self.getProgress(timelineEls[i]);
let timelineKey = timelineEls[i].dataset.scrollTimeline;
console.log(timelineEls[i].dataset);
let timeline = timelines[timelineKey]._recent;
let timelineData = timelines[timelineKey];
let duration = timelineData.duration();
if ( progress > 0 && progress <= 1 ) {
timeline.seek(progress * duration);
} else {
if ( progress <= 0 ) {
timelines[timelineKey].seek(0);
} else {
timelines[timelineKey].seek(duration);
}
}
}
})

console.log displays this data: DOMStringMap {scroll: "", scrollTimeline: "albed-anim"}

Any suggestions on how to resolve this error? Seems like a TypeScript issue, but can't pinpoint the cause or solution.

Appreciate any help you can offer.

Answer №1

When dealing with the dataset property, keep in mind that it's not available on all types of elements. You should confirm that the element is of type HTMLElement before proceeding. A simple adjustment to your for loop can help ensure this:

for (const timelineEl of timelineEls) {
  if (timelineEl instanceof HTMLElement) {
    const progress = self.getProgress(timelineEl);
    const timelineKey = timelineEl.dataset.scrollTimeline;
    // ...
  }
}

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

ERROR: An issue occurred while attempting to resolve key-value pairs

Within my function, I am attempting to return a set of key-value pairs upon promise completion, but encountering difficulties. const getCartSummary = async(order) => { return new Promise(async(request, resolve) => { try { cons ...

What is the best way to share variable values between different components in React?

I initially assumed that setting a prop would handle the value within the receiving component, but now I realize that I want to export the value to other components. For example, consider this reusable component: RegionButtons.jsx file import React, { us ...

Troubleshooting problem with resizing and links in IE11 for iframe-resizer

When using the iframe-resizer from https://github.com/davidjbradshaw/iframe-resizer, I have encountered a few issues. Upon resizing the browser window, I noticed that if I first restore down and then manually resize, some extra padding appears. The paddin ...

Can you explain the significance of { 0: T } in this particular type definition?

I stumbled upon this type declaration in my codebase which is meant for non-empty arrays: type NonEmptyArray<T> = T[] & { 0: T } and it functions as expected: const okay: NonEmptyArray<number> = [1, 2]; const alsoOkay: NonEmptyArray<n ...

Using node.js to parse an XML file from a URL and iterate through it to retrieve all the URLs contained within

I am currently utilizing the node module xml2js. The format of my xml file looks like this: <?xml version="1.0" encoding="UTF-8" ?> <?xml-stylesheet type="text/xsl"?> <?xml-stylesheet type="text/css" media="screen" href="some url" ?> ...

Guide to specifying the indexer type of a function argument as T[K] being of type X in order for t[k]=x to be a permissible expression

Currently, I am attempting to create a function that can alter a boolean property within an object based on the provided object and property name. While I have found some helpful information here, the function body is still producing errors. Is there a way ...

How to attach onclick events to newly created div elements using JavaScript

Having some trouble adding click events to multiple dynamically created div elements. After creating divs with ids a0 through an, I want to assign them click events using a for loop. The problem is that when the click event occurs, I can't identify w ...

What is the best way to attach an event again in jQuery?

My JavaScript/jQuery code initiates a listener to highlight DOM elements when a button is clicked. By clicking the button, the listener event starts (e.g. highlight : function()). If I click on any part of the webpage, the listener stops. However, if I ...

Managing object methods in ReactJS state

Currently, I am utilizing the Google Maps API and have the following piece of code implemented: class App extends React.Component { state = { polygon: null, }; checkPoly() { if (this.state. ...

Comparing tick and flushMicrotasks in Angular fakeAsync testing block

From what I gathered by reading the Angular testing documentation, using the tick() function flushes both macro tasks and micro-task queues within the fakeAsync block. This leads me to believe that calling tick() is equivalent to making additional calls pl ...

Customize Your Calendar: A Guide to Disabling Dates with Pikaday.js

Wondering how to disable specific days on a calendar? Look no further! Here's a solution using the `disableDayFn` option from Github: disableDayFn: callback function that gets passed a Date object for each day in view. Should return true to disable s ...

Stopping the Game Loop in Windows Phone 8.1 with WinJS

Despite everything working smoothly, I am facing an issue with stopping the game loop when the Start button is pressed and the app is moved to the background. The event handler for suspend, app.oncheckpoint = function(args) {}, does not seem to fire for t ...

Tips for building an API using an app router in Next.js

After setting up my new project and using the app router as recommended in the latest version of Next.js, I am now looking to create an API. How can I go about creating and utilizing this API within my page app/user/page.tsx? I have already created an API ...

What is the best way to display label information on a Google line chart?

line graph column graph My graph continuously calls the Controller to fetch recent data from the Database. There are two lines on the graph, and I would like to display the names of each line (column) such as red=counts of something // brown=counts of so ...

Do the Module-Component structure and lazy loading work the same in an Angular Nativescript project as they do in traditional Angular projects?

I'm currently working on a project using Angular and Nativescript, and I need to establish a solid architecture. However, I haven't been able to find a comprehensive guide for a flexible and robust foundation. Would it be advisable to simply foll ...

Extract the URL from the query parameters and inject it into a div element

I am currently working on a project to create an ASPX page with two separate div's. The first div will have static content, while I want the content in the second div to be dynamic. Users should be able to input a URL as a query string, and that URL s ...

Utilizing $scope in $compile in Angular: A Comprehensive Guide

Attempting to utilize my scope within a compile... I aim for a scenario where upon clicking a button, a div is generated containing the round number. main.controller('fightController', function($scope, $http, Services, $compile) { $scope.d ...

What is the best way to ensure that at least one option is selected when using Angular Material toggle with multiple choices?

Is there a way to allow users to select multiple options but prevent them from deselecting a button if it is the only choice available? Code Snippets: <mat-button-toggle-group (change)="changeOpt($event)" multiple name="fontStyle" aria-label="Font Sty ...

Issues encountered when attempting to add a new user on Firebase

I am facing an issue with this function that is supposed to add new users to my firebase database, but for some reason, it's not working. exports.createUserWithEmailAndPassword = functions.https.onCall( async(data, context) => { const { ...

Steps to Change the Default Value of Ant Design Date Picker upon Date or State Modification

AntD Version : 5.0 Upon loading the page, the default date is displayed, but I am passing a date stored in a state object. However, after successfully loading the page, changing the state of the date from one component does not update the default value of ...