Using function as object property runs on page load but not when called

Question

Noob here self-teaching with a question that seems like it should be obvious.

I'm making a game in which a character (a movable image) touches one of many images on the screen, and when a key is pressed a function specific to the image being touched runs.

I've created an object with several properties defining placement of the image etc, with the last parameter being a function (a function as an object property is called a method, right?). Here's the object:

var obj1 = {xleft:0, xright:800, ytop:0, ybottom:500, action:"Test", text:"Whoop whoop", func:alert('Eureka!')};

So when my character is within these parameters (touching the object) and the key is pressed, this function runs:

function action(){ document.getElementById('Text').innerHTML = obj1.text; obj1.func(); }

When the key is pressed, the text appears as it should, but the function doesn't run (more specifically, in this incarnation the function runs when the screen loads, which isn't what I want). I've tried several other possibilities but nothing has worked.

Can anyone help?

Just calling the property "func" doesn't make the value that is assigned - which is the result of *evaluating* the (`alert('Eureka!')`) expression - is a function. Put another way, the code is roughly equivalent to `var result_of_alert = alert('Eureka!'); var obj1 = {func: result_of_alert};`, which should make a/the issue more apparent. — user2864740, Aug 28 '14 at 21:38
I'm not sure that I understand. I'm guessing you're saying that I need to input some code in my "function action" that will run the func alert instead of just stating it there, but that's what I'm asking. How do I tell function action to run obj1.func? — Truth, Aug 28 '14 at 21:39
Pretty much. Assign a real function, not the (undefined value) result of calling one: `var obj1 = { func: function () { alert('Wheee!') } }`. The result of evaluating `function () { .. }` as an expression returns a function-object, which *is* a function and can be invoked later (e.g. `obj1.func()`). See http://stackoverflow.com/questions/111102/how-do-javascript-closures-work?rq=1 etc. — user2864740, Aug 28 '14 at 21:40

score 0 · Answer 1 · answered Aug 28 '14 at 21:29

0

Change the func:alert('Eureka!') to func:function(){alert('Eureka!');}.

answered Aug 28 '14 at 21:29

Blubberguy22

1,344
1
17
29

3

If you provide just a little more information on **why** OP's problem occurs, and why you have to change it, this answer could be accepted – webketje Aug 28 '14 at 21:32
Sorry, I had to go and I tried to give an answer before I left (even if it had to be a fast one) but it seems it's too late and another answer has been accepted, otherwise I'd fix it. – Blubberguy22 Aug 29 '14 at 12:34

score 0 · Accepted Answer · edited Aug 29 '14 at 01:20

The problem is that this: func:alert('Eureka') is not assigning a function to the func property.

This is one way you could do it:

function theFunction(message) {
   alert(message);
}

var obj1 = {
    xleft:0, 
    xright:800, 
    ytop:0, 
    ybottom:500, 
    action:"Test", 
    text:"Whoop whoop", 
    message: 'Eureka!', 
    func: theFunction
};

function action(){
    document.getElementById('Text').innerHTML = obj1.text;
    var message = obj1.message;
    obj1.func(message);
}

score 0 · Answer 3 · edited Sep 09 '14 at 21:57

Both answer of bubberguy22 and Noam are right.

The one of bubberguy22 is a shortcut of Noam's one. Noam use what is called an anonymous function. That means that it's a function that directly assigned to an object attribute You won't be able to call this function by it's name... Because... It doesn't have one.

One of the case where anonymous function is not advisable is when You want assign a function to multiple attribute of an object. Eg:

function theFunction(message) { alert(message); }

var obj1 = {xleft:0, xright:800, ytop:0, ybottom:500, action:"Test", text:"Whoop whoop", message: 'Eureka!', onClick: theFunction, onHover: theFunction};

I think you meant that Blubberguy22's answer is utilizing an anonymous function, not my answer. — Noam, Sep 14 '14 at 02:40

Using function as object property runs on page load but not when called

3 Answers3