image.onload function with return
detect()
doesn't return any value. If you want to get an alert, replace return result;
by alert(result)
.
An analysis of your code:
function detect(URL) {
...
image.onload = function(){ //assigning an event handler (function) to an object
...
return result; //this return statement is called from within another function
}
}//function "detect" ends here. No return statement has been encountered
This is because the function detect doesn't return anything since the load event happens after the function is finished. And you forgot to append the image to something so it never loads.
You could do something like:
function detect(URL) {
var image = new Image();
image.src = URL;
image.onload = function() {
var result = 'result'; // An example result
alert(result); // Doesn't work
}
document.body.appendChild(image)
}
detect('http://www.roseindia.net/javascript/appendChild-1.gif');
fiddle here http://jsfiddle.net/LVRuQ/
I get it myself:
I didn't know that I can assign a variable to that (for me looking already assigned) onload.
function detect(URL) {
var image = new Image();
image.src = URL;
var x = image.onload = function() {
var result = [{ x: 45, y: 56 }]; // An example result
return result;
}();
return x;
}
alert(detect('x'));
The value is returned, but not from the detect
function.
If you use a named function for the load event handler instead of an anonymous function, it's clearer what's happening:
function handleLoad() {
var result = [{ x: 45, y: 56 }];
return result;
}
function detect(URL) {
var image = new Image();
image.src = URL;
image.onload = handleLoad;
}
The value is returned from the handleLoad
function to the code that calls the event handler, but the detect
function has already exited before that. There isn't even any return
statement in the detect
function at all, so you can't expect the result to be anything but undefined
.
One common way of handling asynchronous scenarios like this, is to use a callback function:
function detect(URL, callback) {
var image = new Image();
image.src = URL;
image.onload = function() {
var result = [{ x: 45, y: 56 }];
callback(result);
};
}
You call the detect
function with a callback, which will be called once the value is available:
detect('image.png', function(result){
alert(result);
});