Unable to assign properties in TypeScript

export function updateAttributes(attributes: string[][], data: Object, element: HTMLElement): void {
    attributes.forEach(([attr, value]) => {
        let parsed = parseString(value, data)
        if (value !== element.attributes[attr]) {
            element.attributes[attr] = parsed
        }
    })
}

I came across an issue with the function above. I am struggling to set the attribute using element.attributes[attr].

An error message is displayed:

Element implicitly has an 'any' type because index expression is not of type 'number'.

I am confused as to why this error is occurring. Can someone please clarify why I am unable to simply set an attribute?

javascripttypescript

Answer №1

Typescript is the correct choice in this scenario.

HTMLElement.attributes represents a NamedNodeMap, which can be accessed using numerical indexes similar to an array. However, the variable attr is clearly a string here.

If you intend to utilize this feature, it is recommended to employ the NamedNodeMap api for managing attributes.

Alternatively, you can directly invoke the getAttribute and setAttribute methods on the element itself, which also works effectively.

export function updateAttributes(attributes: string[][], data: Object, element: HTMLElement): void {
    attributes.forEach(([attr, value]) => {
        let parsed = parseString(value, data)

        // Access getAttribute and setAttribute directly on the element
        if (value !== element.getAttribute(attr)) {
            element.setAttribute(attr, parsed)
        }
    })
}

Playground

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

Input hidden is not detecting keyup or change events are not firing

One way to monitor and implement something when the Hidden input value changes, after taking its value from a text input, is by using jQuery. Here's an example of how you can achieve this: $('#input2').on('keyup, change', function ...

javascriptjquery

Mysterious attributes of angular 6's <table mat-table> tag

This particular question regarding the angular material table has not been duplicated in any other discussions. Other similar questions pertain to angular versions 2-5, not version 6 The issue I am encountering is as follows: Can't bind to 'dat ...

htmlangulartypescriptangular-material

Node.js is having trouble retrieving information from the SQLite database

Here's a simple code snippet I'm using to retrieve data from my sqlite database. Index.ts: import { Database } from './Class/database'; Database.checkIfExists("some ID"); Database.ts: export class Database { static sqli ...

node.jstypescriptsqlite

Leveraging database functionality through sequelize

I'm a beginner in Express and I want to learn how to create a "Select *" query on a table. I know that I need to create a model of the table in a .js file and I have a good understanding of the next steps. However, my question is: How can I create a ...

javascriptnode.jsdatabaseexpresssequelize.js

Send the user to a specified destination

Currently, I am working on creating a form that allows users to input a location and have the page redirect to that location after submission. However, I am facing difficulty in determining how to set the value for action="" when I do not know what the loc ...

javascriptphphtmlweb

Need help with creating a unit test for the Material UI slider component? An error message saying "Error: Cannot read property 'addEventListener' of null" is displayed when trying to render the component

Encountered a problem while testing the Material-UI Slider with React-Test-Renderer: Uncaught [TypeError: Cannot read property 'addEventListener' of null] Codesandbox Link import React from "react"; import { Slider } from "@materi ...

reactjstypescriptmaterial-uireact-testing-libraryreact-test-renderer

Flowtype: Utilizing type hints for class-based higher order component

I am currently working on typehinting a higher-order component (HOC) that adds a specific prop to a passed Component. The code snippet looks like this: // @flow import React, { Component } from 'react'; import type { ComponentType } from 'r ...

javascriptreactjsflowtype

The middleware function in my express server is not being identified

Currently, I am tackling server-side rendering in React and have developed a basic server in Express. However, I'm encountering the "TypeError('app.use() requires a middleware function')" error repeatedly. Below is a snippet of my app.js: v ...

javascriptnode.jsreactjsexpress

The <br/> tag is not functioning properly when retrieving text from a MySQL query

Currently, I am involved in a project that involves an A.I pushing text onto a MySQL database. Our goal is to display the ongoing writing process on a webpage. We are still actively working on this. We are retrieving the data and regularly checking the da ...

javascripthtmlmysqljson

Modify content once it has been rendered using Jquery

After loading, I want to adjust the style of a specific element. However, I am running into a null pointer issue. function loadFriends() { $("#friendsContainer").load("friends.html"); } selectCurrentSetting(); function selectCurrentSetting() { c ...

javascriptjqueryhtmlajax

Load blender scene with functional lighting using THREE.JS GLTFLoader

Recently, I've been experimenting with the GLTFLoader feature in THREE.js along with the new blender exporter found here. After successfully adding a model with similar color material and importing the scene into my THREE.js project, I noticed that wh ...

javascriptthree.jsblender

Utilizing JavaScript in Protractor, explore a list to identify the selected checkboxes and those that remain unchecked

Currently, I am working on developing an end-to-end test using Protractor. My main objective is to extract the names from a list and then determine which checkboxes have been selected and which ones haven't. To check the state of the checkbox, I pla ...

javascripthtmlangularjsprotractor

What steps should I take to customize the design of my Stripe subscription payment page?

I am having trouble with the alignment of the subscription payment page, which is currently displaying all information in a single line. I would like to format it like a traditional payment form with card number, CVV, and expiry on separate lines rather th ...

javascriptphphtmlcssstripe-payments

Exploring Typescript's conditional types and narrowing branches

When I use the following code snippet: type Identity <T extends string> = T; type MaybeString = string | undefined; type StringOrNever = MaybeString extends undefined ? never : Identity<MaybeString>; The compiler raises an error stating that ...

typescriptconditional-types

Error message "Property 'name' does not exist on type '{}'" is encountered when using Ionic/Angular HttpClient and no data type is specified

While working on my Ionic project, I encountered an error in Angular when trying to fetch data from an API using HttpClient. The error message that popped up was 'Property 'name' does not exist on type '{}'.'. Below is the cod ...

javascriptangulartypescriptionic-frameworkionic2

"Exploring the process of extracting data from a JSON URL using NextJS, TypeScript, and presenting the

After tirelessly searching for a solution, I found myself unable to reach a concrete conclusion. I was able to import { useRouter } from next/router and successfully parse a local JSON file, but my goal is to parse a JSON object from a URL. One example of ...

jqueryjsonreactjstypescriptnext.js

Ways to eliminate all attributes and their corresponding values within HTML tags

Hey there, I'm trying to strip away all the attribute values and styles from a tag in html Here's my Input: <div id="content"> <span id="span" data-span="a" aria-describedby="span">span</span> <p class="a b c" style=" ...

javascriptjquerynode.js

What is the most effective way to retrieve the full height of a webpage using JavaScript

  Is there a way to get the actual height of the webpage, not just the browser screen height? I noticed that clientHeight only returns the height of the window! Thank you for your help! ...

javascripthtml

How to implement server-side rendering in Next.js 14 with GraphQL queries

I recently completed a Next.js project and configured Apollo Client. I integrated it with my components, as shown in my layout.tsx file: import { Inter } from "next/font/google"; import "./globals.css"; import ApolloProviderClient from ...

javascriptreactjsnext.jsgraphqlapollo-client

Leverage third-party extensions instead of ionic-native plugins in your Ionic 2

Currently, I am utilizing a Cordova plugin from GitHub that is not accessible in Ionic Native. However, I have encountered an issue. How can I effectively use non-Ionic-Native plugins in Ionic 2? I attempted the following: declare var myPlugin: any; my ...

cordovatypescriptionic2cordova-plugins