The HTMLElement type does not include the Ionic typescript property

I am currently using Ionic v3 with TypeScript.

My goal is to store the file_url in an array after checking if its width is equal to twice its height.

However, I am encountering an error:

The 'name_array' property does not exist on the 'HTMLElement' type.

Below is my code snippet:

let img = new Image();

img.src = file_url;

img.onload = function () {

    if( img.width == (img.height * 2) ){
        this.name_array.push({ id: 1, url: file_url });
    }

};

Can someone please guide me on how to successfully push the file URL into my array?

Thank you!

javascriptangulartypescriptionic-frameworkionic3

Answer №1

employ the arrow function to reach this within the function

As per the documentation from Mozilla developers:

Prior to arrow functions, each new function would define its own this value (a new object for constructors, undefined in strict mode function calls, the base object if the function is called as an "object method", etc.). This approach was found to be less than ideal in an object-oriented style of programming.

Arrow functions do not possess their own this

let img = new Image();
img.src = file_url;
img.onload = () => {
   if( img.width == (img.height * 2) ){
     this.name_array.push({ id: 1, url: file_url });
   }
};

Find the complete documentation here

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

Angular downgrades from version 13.3.8 to 13.3.7

When I input the command: ng v I am shown the version as "Angular: 13.3.8" in the image. Can someone explain where this version is coming from and how can I change it back to 13.3.7? Furthermore, I noticed that the packages listed in the screenshot are d ...

angularnpmnpm-package

Control the access to shared resources when dealing with asynchronous functions in JavaScript

Currently, I am developing a node.js server script that will utilize a shared text list for multiple clients to access asynchronously. Clients have the ability to read, add, or update items within this shared list. static getItems(){ if (list == undef ...

javascriptnode.jsexpressasynchronousrace-condition

Vue.js has mysteriously stopped functioning

My Vue.js project suddenly stopped working and I've been trying to figure out the issue for hours with no luck. Here's an overview of my HTML file which includes dependencies and a table displaying data from users. <!DOCTYPE html> <html ...

javascriptvue.js

Implement a grid control in Kendo-UI for Angular 2 that includes checkboxes in the first column

What is the process for adding a checkbox to the first column of a Kendo UI Angular2 grid? How can the checked status be retrieved for each row in the data? ...

angularkendo-grid

What steps should I take to make sure the vuex store is included in my build process?

I am currently working on a Vue application using vue cli 3. I found a guide here that explains how to build the app with vue-cli-service build --target wc --name my-element [entry] In order to test the output, I have created an index.html file: <!D ...

javascriptvue.jsvuexweb-componentvue-cli-3

Is there a library available that can assist me in writing JavaScript code within C#?

Currently, I am in search of a tool that can assist me in writing C# code that will automatically convert to JavaScript. The main benefits I am seeking are improved code-completion and type-safety. Specifically, I am interested in the following features: ...

c#.netjavascript

How to access JavaScript files from "bower_components" instead of "node_modules" using webpack

With the utilization of main-bower-files in my Gulp compilation tasks, it is not feasible for me to use webpack to require modules from the node_modules directory as it would interfere with the processing of CSS, images, and fonts in my current asset sys ...

javascriptnode.jsdependency-injectionwebpackbower

object stored in an array variable

I am looking to find out if there is a way to access a variable or function of an object that has been added to an array. I want to display all the objects in the array on a web page using a function that will return a string containing their content. Thi ...

javascripthtml

Having trouble with my jQuery .hover() code not running as expected

Whenever I hover over my divs, I want them to change color. However, the code doesn't seem to be working as expected when I try to do so. I suspect that the issue might be related to the z-index property used in the class that I am trying to hover ove ...

javascriptjqueryhtmlcssjquery-hover

Error: TypeScript Knockout table failing to display data

I have a table that displays invoices, along with a nested table showing the individual checks associated with each invoice. I am using knockout and typescript to render these tables. Currently, I can successfully display the invoices but am facing difficu ...

javascripttypescriptknockout.js

Capture a snapshot of a webpage that includes an embedded iframe

Currently, we have a nodeJS/angular 4 website that contains an iframe from a third party (powerBI Emebdded). Our goal is to develop a feature that allows the end user to capture a screenshot of the entire page, including the content within the iframe. We ...

javascripthtmlnode.jsangulardom

Vue2Editor not displaying updated content following data retrieval from axios call

I've encountered an issue with my Vue component that uses Vue2Editor. Everything was working great until I tried to update the content using data from an async function. To troubleshoot, I tested updating text in a simple div. Here's a snippet ...

javascriptvue.jsasynchronous

Unlocking the Sound: Using a Custom Button to Activate Audio on HTML Video in React

While working on a project, I encountered a small issue: I have a video tag in my code: <video muted autoPlay loop src={video}> I simply want to add a single custom button/control to toggle between muting and unmuting the video. I'm thinking of ...

javascriptreactjs

As the cursor moves, the image follows along and rotates in sync with its

Can anyone help me figure out how to create a moving image that follows the mouse cursor? I have a radial pie menu with an image in the middle, and I want it to spin and rotate as the mouse moves. Any ideas on how I can achieve this effect? I would greatl ...

javascripthtmljquerycss

What is the method for obtaining the div ID's from this form?

This is the scenario I am working on: my app takes the text inputted by the user and exports it to a specific website that contains similar elements. For example, if the user enters a title in the app and clicks a button, the app will transfer that value t ...

javascriptjavajqueryhtmlecmascript-5

Why is the response from this HTTP request displaying array lengths instead of actual content?

I am currently working on a project involving fetching data asynchronously from an API. Everything seems to be working fine, except for when I attempt to add the correct answer to the incorrect answers array. Instead of displaying the content, only the len ...

javascriptjqueryarrays

Error: The value for 'prepareStyles' property is undefined and cannot be read

Can anyone provide some guidance on this code snippet? I am struggling to understand the error message I am receiving. import React, {PropTypes} from 'react'; import TransactionListRow from './TransactionListRow'; import {Table, TableB ...

javascriptreactjsmaterial-uienzyme

I prefer not to have my preceding component re-rendered in React

I'm currently working on developing a user interface for a search engine using elasticsearch within React. One issue I'm facing is with the Pagination technique - when a user clicks on a result and then navigates back to the list of results, it r ...

javascriptreactjselasticsearchreact-router

Using Angular Material to dynamically hide columns in a table that is being created on the fly

Is there a way to hide columns in my table based on the ID value sent to the page upon opening it? While researching, I found a method for tables with dynamically generated columns in this post: https://github.com/angular/components/issues/9940. However, t ...

htmlangulartypescriptangular-material

Tips for effectively utilizing innerHTML in this particular scenario

For an assignment, we were tasked with creating a Madlib game where users input words into textfields to replace certain words in a hidden paragraph within the HTML using JavaScript and CSS. The paragraph embedded in the HTML page is as follows: <span ...

javascriptjqueryhtmlcssinnerhtml