Here is a unique version: "In Javascript, users can trigger the function this.Something() from within this.img.onload by

I have some code that looks like this...

Thing function () {    
  var img = new Image;    
  DoSomeStuff function() {    
  //Code here that relies on my image being loaded...    
};

InitMe function(src) {    
  this.img.onLoad = this.DoSomeStuff;     
  this.img.src = src;    
};    
}

var Test = new Thing();    
Test.InitMe("some string");

The issue here is that this.DoSomeStuff becomes img.DoSomeStuff instead of Thing.DoSomeStuff

What I'm trying to figure out is how to call the Thing.DoSomeStuff() function from img.onLoad....

javascript

Answer №1

If you are working with ES5, you have a couple of options for handling this situation:

this.image.onLoad = this.DoSomeAction.bind(this);

Alternatively, you can do it like this:

var context = this;
this.image.onLoad = function() {
    context.DoSomeAction();
}

It's worth mentioning that your existing code is not valid. The variables may be in the wrong scope or not properties of 'this', and the way you declare functions is incorrect as well.

Answer №2

Perhaps you need this

function Widget() {    
    this.picture = new Image;    
    this.PerformAction=function(){
        // take action
    };

    var self=this;
    this.Initialize=function(imageSource) {   
        self.picture.src = imageSource;
        self.img.onload = function(){
            self.PerformAction();
        }
    };    
}

var Example = new Widget();    
Example.Initialize("sample.png");​

VIEW DEMO.

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 limiting me from utilizing the entire Google Calendar feed?

I currently have a public Google Calendar set up. My goal is to retrieve appointment data in JSON format from this calendar. When I utilize the following URL https://www.google.com/calendar/feeds/{calendar_id}%40group.calendar.google.com/public/basic?alt ...

javascriptjsongoogle-apigoogle-calendar-api

Error: Angular JS Service is undefined

I'm currently working on creating an array in my application that is universally accessible through services. Additionally, I have implemented ui-router in my application. In the app.js file, I define the service like this: myFamilyApp.service(&apos ...

javascriptangularjsangular-ui-router

Is it possible to pass a useState function to a component during its initialization?

Currently, I am utilizing the useState hook to effectively handle the rendering of components on the screen. My goal is to initialize it with a component while passing in the useState function to set the screen within the component. Below is my App.js fil ...

javascriptreactjsreact-hooksuse-state

Encountering the error message "Module 'request' not found" despite the fact that I've already included the request module

I'm currently facing an issue with my Cloud Function that involves using the request library. After installing the request package using npm install request, I noticed it's located in the node_modules directory, just like all the other packages: ...

javascriptnode.jsnpmgoogle-cloud-functions

Variations between <div/> and <div></div>

When using Ajax to load two divs, I discovered an interesting difference in the way they are written. If I write them like this: <div id="informCandidacyId"/> <div id="idDivFiles"/> Although both divs are being loaded, only one view is added ...

javascriptjqueryhtml

when passing a JavaScript symbol in Django's JSON objects, it does not display properly

When working with Django (2.2), my goal is to send a JSON response in this format: return JsonResponse(data, safe=False) Within the data object, there is a value that looks like this: "unit": "\u33A5" (cubic meters). However, ...

javascriptdjango

Why is this tetris piece not appearing fully on the grid when using arrays?

Below is the code snippet, and you can find a link to the jsfiddle below. I'm facing an issue where the first row of the block is not being drawn, and dealing with these 2-dimensional loops is quite challenging for me. I am unable to figure out why t ...

javascriptmatrixtetris

Modify the main element of a component

Vue.js requires only a single root element for each component, which is typically wrapped in a div tag. However, this can lead to unexpected issues, such as breaking the layout when using Bootstrap and inserting a div between specific elements like <b-r ...

javascriptvue.js

Encountering an incorrect number of parameters for "undefined" during the deployment of a smart contract

I am facing an issue while attempting to deploy my first Voting contract on the testRPC. The error seems to arise from the arguments parameter in the code snippet below. When I tried passing an empty array, it gave an error stating "Got 0 expected 1!". Si ...

javascriptnode.jsethereumsolidityweb3js

Create a consistent number based on quantity

Looking to generate a sequence of numbers equal to the count in PHP or JavaScript for my application. For example, if my total count is 7: <?php $total = 7; I would like to generate seven 1's like this: $split_one = [1,1,1,1,1,1,1]; If my count ...

javascriptphpjquery

What is the correct way to pass parameters when using the setState() function in React hooks?

I am working on a project where I have a list of country names. When a user clicks on one of the countries, I want to update the state with the name of the newly selected country. This state change will then trigger other changes in a useEffect(). The stat ...

javascriptreactjsreact-nativereact-hooksstate

Node.js refusing to acknowledge the get request handler for the homepage of the website

My Node.js server setup is quite simple: const express = require('express'); const app = express(); const http = require("http"); const path = require('path'); const favicon = require('serve-favicon'); // Public fil ...

javascriptnode.jsexpress

Tips for retrieving data from a concealed input within a div that is being looped through in Angular.js

Currently, I have a controller that sends data to the UI and uses the ng-repeat directive to map them. My next goal is to bind this data with a hidden input form and then send it to another function in the controller when a click event occurs. Any tips on ...

javascriptangularjsangularjs-ng-repeat

Run the code after a certain amount of time determined by the characters in JavaScript

list = ["Rashid", "Kalam", "NEO"] Rashid contains six characters, so it will be console.log after 6 seconds. Kalam has 5 characters, which means it should be logged on the fifth second, and so forth. ...

javascriptnode.jsarrays

Assigning names to the points on the AxisHelper component in THREE.js

Take a look at the code snippet provided below: <html> <head> <title>My first Three.js app</title> <style>canvas { width: 100%; height: 100% }</style> </head> <body ...

javascriptcanvasthree.js

Webpack encounters an error while attempting to load Bootstrap v4.0.0-beta

I've encountered an issue with my webpack configuration and Bootstrap v4.0.0-alpha.6 that was working fine until I attempted to switch to v4 beta. Unfortunately, I can't seem to get it working properly now :( Here is a snippet of my config: w ...

javascriptwebpackbootstrap-4

What is the best way to create a page that moves on release using HTML/CSS?

I'm working on a website where I want to make an interactive feature. When users click on an image on the left side of the page, I want the page to move backward. Similarly, when they click on an image on the right side, I want the page to move forwar ...

javascripthtmlcssmouseover

How does Chrome have the capability to access the gist json file? Isn't that typically not allowed?

Fetching a JSON file from Github Gist can sometimes be straightforward, but in certain situations, I have faced difficulties due to CORS restrictions. This has led me to resort to using JSONP instead. Can you shed some light on why this is the case? ...

javascriptajax

How about making an Ajax request for each item in the array?

I have a task to perform Ajax calls for each item in an array and then trigger another function once all the calls are completed. Adding complexity, I am incorporating Papa Parse into making the Ajax call. This is the code snippet: getCsvData: function( ...

javascriptajaxparse-platform

Place attribute value directly under the border of an HTML element using a combination of JavaScript and CSS

I'm currently working on a JavaScript script to scan the DOM for elements that have a specific custom attribute called example-type. The goal is to apply CSS styling to draw a border around these elements and then display the value of the example-type ...

javascripthtmlcss