Whenever I try to work with HTML, it consistently generates an attribute error

Looking to work with an HTML tag and retrieve its attribute, here is my code snippet:

findPosition(target: HTMLDivElement): IPiece {
  const row: number = parseInt((HTMLDivElement).parentElement.getAttribute('row'));
  const column: number = parseInt((HTMLDivElement).parentElement.getAttribute('column'));
  const position: IPosition = { row, column };
  const pieceInstance = this.piecePlace[row][column]; 

  return { position, instance: pieceInstance };
}

However, encountering the following issue with 

parseInt((HTMLDivElement).parentElement.getAttribute('row'))
:

Property 'parentElement' does not exist on type '{ new (): HTMLDivElement; prototype: HTMLDivElement; }'.ts(2339)

Any suggestions on how to solve this?

javascripttypescript

Answer №1

Replace HTMLDivElement with target

updatePosition(target: HTMLElement): IItem {
  const rowNumber: number = parseInt((target).parentElement.getAttribute('row'));// this line
  const columnNumber: number = parseInt((target).parentElement.getAttribute('column'));// this line
  const finalPosition: IPosition = { rowNumber, columnNumber };
  const itemInstance = this.itemPlacement[rowNumber][columnNumber]; 

  return { position: finalPosition, instance: itemInstance };
}

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

What is the best way to restrict event handling to only occur once every X seconds using jQuery or JavaScript?

Is there a way to limit handling the event of a rapidly-firing keypress to once per X seconds using jQuery or vanilla JavaScript? Check out this jsfiddle that demonstrates rapid keypress firing without any limiting on the handling: View here ...

javascriptjqueryjquery-eventsdebouncing

How can one retrieve the value of AngularJS {{curly-brace-value}} using jQuery?

Although I may not be well-versed in angular/jquery, it is clear that the div generated using angular has caught my attention: <div id='my-div' style={{ang.style}}'> This is content inside the div </div> The style of the div is ...

javascriptjqueryhtmlcssangularjs

TS6059 found in excluded folder

I'm facing an issue with my tsconfig.json file that looks like this: {"compilerOptions": { "module": "commonjs", ...

angularjstypescriptangular

Ways to execute multiple queries in ReactJS using AWS Amplify

I'm having trouble querying multiple Dynamo databases in React.js. I initially attempted to define each component in separate classes and import them, but that didn't work. Then I tried defining both components in the same class, which resulted i ...

javascriptreactjsamazon-dynamodbaws-appsyncaws-amplify

I'm curious about the process by which custom hooks retrieve data and the detailed pathway that custom hooks follow

//using Input HOOK I am curious to understand how this custom hook operates. import { useState } from "react"; export default initialValue => { const [value, setValue] = useState(initialValue); return { value, onChange: event =&g ...

javascriptreactjsmaterial-uireact-custom-hooks

Accessing data attributes using AngularJS

Trying to extract the data attribute from the following code: <button ng-click="EditPlayer(name, position, number, age)" id="btnEdit" class="btn btn-successes" data-playerid="{{player.id}}">Save</button> Within my angular controller: $scope. ...

javascriptjqueryangularjs

The FullCalendar plugin on the list was experiencing functionality issues

I came across this code snippet that is causing me some trouble: .... import { FullCalendarComponent } from '@fullcalendar/angular'; import { EventInput } from '@fullcalendar/core'; import dayGridPlugin from '@fullcalendar/daygrid& ...

javascriptangularfullcalendarangular8

A unique feature where a bar emerges from the bottom of the screen, smoothly glides upwards, and then securely fastens to

I'm working on bringing to life a concept that I've been envisioning. The design would feature a long scrolling page with a unique navigation bar behavior. The idea is for the navigation bar to initially start at the bottom of the screen and the ...

javascriptjqueryhtmlcss

Switch out the innerHTML content and then revert back to the original while still preserving the events

Imagine you have a div called el with various components and events that are out of your control (like on mouse over and click). What if you wanted to insert a new widget inside this div? You might try something like this: var save = el.innerHTML; el.inn ...

javascriptjqueryhtmldominnerhtml

What is it about Kyle Simpson's OLOO methodology that seems to swim against the tide of Typescript's popularity?

Disclaimer: this post might come across as impulsive. Warning for Typescript beginners! Also, a bit of a vent session. Recently, I delved into the OLOO approach from the YDKJS book series within a Typescript and Node environment. // ideal JS syntax le ...

javascripttypescript

When coding in JavaScript, the value of "this" becomes undefined within a class function

I'm facing an issue with my TypeScript class that contains all my Express page functions. When I try to access the class member variable using this, I get an 'undefined' error: class CPages { private Version: string; constructor(ver ...

javascriptnode.jstypescriptexpress

Reorder the placement of file inputs that have been prepended

Would it be feasible to have the prepended file input display below the preceding element rather than above it? This way, the "Select a file:" text would remain at the top of all newly added elements. $(document).ready(function(){ $(' ...

javascriptjqueryhtml

Utilizing Selenium and JavaScript to discover and extract the subject fields within a table

In my sent message list, I am trying to display the subject fields of all messages using Selenium and JavaScript (not Java) for coding. Here is the code snippet: <table class="messages"> <tbody><tr class="section-heading"> < ...

javascriptlistseleniumfilter

Display a pop-up window when hovering over a table cell using HTML and JavaScript

I am currently developing a JavaScript application and came across a helpful library called qtip2. My objective is to have different information displayed when the user hovers over each cell in the table. The qtip2 library I mentioned earlier can display ...

javascripthtmlcss

Rendering various models in separate DIVs using Threejs

(Brand new to venturing into Three.js) Overview Currently, I am immersed in the development of a 3D Viewer that can showcase multiple stl models simultaneously. Each model is supposed to be rendered within its own separate div element, resulting in a g ...

javascriptthree.jsrenderingrender

javascript - audio is not working on the web

I've been trying to incorporate sound into my website using this code. Strangely, the sounds only seem to play in Adobe Dreamweaver and not in any browsers. Any advice would be greatly appreciated! :) var audio1 = new Audio('sound1.mp3'); v ...

javascriptaudio

Printing through Window.Print() in Google Chrome may cause interruptions in other open tabs

Currently, I am troubleshooting a printing issue on an ASPx Web Forms Page. I have a 'Print' button that triggers the following event (print method): private void MenuPrint_ItemClick(object sender, DevExpress.Web.ASPxMenu.MenuItemEventArgs e) ...

c#javascriptasp.net

Instead of using a v-if condition, add a condition directly in the Vue attribute

Apologies for the unclear title, as I am unsure of what to name it with regards to my current issue, I am attempting to create a component layout using vuetify grid. I have a clear idea of how to do this conventionally, like so: <template> <v-fl ...

javascriptvue.jsvuetify.js

Is it possible to transmit audio from two separate sources through a single peer via WebRTC technology?

Is there a way to send both the microphone audio and an audio file on separate tracks using a single stream in JS? ...

javascriptwebrtcamazon-kinesis-video-streams

In React.js, the switch case statement consistently defaults to the default case

Currently, I am working on utilizing <select> tags to update information across components using useContext(). However, I am encountering an issue where the default case is consistently being returned despite the fact that the logged values match the ...

javascriptswitch-statement