Javascript function undefined?

Question

I am fairly new to javascript and jquery. I thought i had learned enough to do this, but apparently not. I think the code is fairly self explanatory.

The problem is that ArrowDir is apparently undefined. It looks defined to me, but I'm sure I'm missing something obvious.

function ArrowDir(){
    var up = function(){
        $("#arrow").attr('src','up_arrow.jpg');
    };

    var down = function(){
        $("#arrow").attr('src','down_arrow.jpg');
    };
}

$(function () {
    if($("#toggle").onclick){
        ArrowDir().down();
    };
});

I've tried assigning the function as a variable, var ArrowDir = function(), but it doesn't seem to make a difference

I've updated the indentation and formatting to match the original post, and left the missing quote on purpose. Please update the code in your question if the missing quote was a transcription error. — zzzzBov
– zzzzBov, Commented Jun 19, 2013 at 16:01
Don't have a clue how that happened. I think i accidentally broke it up when pasting. It is fine in my code. It isn't the problem, either way. Thanks, anyway. — user2436606
– user2436606, Commented Jun 19, 2013 at 16:02
possible duplicate of Javascript: Do I need to put this.var for every variable in an object? — Bergi
– Bergi, Commented Jun 19, 2013 at 16:09

zzzzBov · Accepted Answer · 2013-06-19 17:17:02Z

4

You can't access the up and down values in the manner that you've written. You'd need to simply call down() from within the ArrowDir body, unless you've added those functions to the ArrowDir return value:

ArrowDir() {
  var up = ...;
  var down = ...;
  return {
    up: up,
    down: down
  };
}

Alternatively, if you're not using ArrowDir for anything other than encapsulating the up and down functions, you should just declare ArrowDir as an object, and call ArrowDir.up() and ArrowDir.down():

var ArrowDir = {
    up: function () {
        ...
    },
    down: function () {
        ...
    }
}

edited Jun 19, 2013 at 17:17

answered Jun 19, 2013 at 15:56

zzzzBov

180k57 gold badges328 silver badges375 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Niet the Dark Absol · Accepted Answer · 2013-06-19 15:56:55Z

2

Assuming the missing quote after "#toggle is a typo, I'm not sure how you expect your code to work.

Here's how it runs, in prose:

Define a function ArrowDir.

When ready, attach a click handler

When clicked, call ArrowDir

In ArrowDir, define two local variables up and down, each with a function to do something.

There is no return statement, so return nothing

Call the down method of the "nothing" object. ERROR

See?

Try adding return {up:up,down:down}; to the end of your ArrowDir function.

answered Jun 19, 2013 at 15:56

Niet the Dark Absol

326k86 gold badges480 silver badges604 bronze badges

Comments

PSL · Accepted Answer · 2013-06-19 15:58:10Z

0

You can create the object this way. In your function you are creating them insdied the scope of itself. SO it is not accessible outside.

function ArrowDir() {


}
ArrowDir.prototype.up = function () {
    $("#arrow").attr('src', 'up_arrow.jpg');
};

ArrowDir.prototype.down = function () {
    $("#arrow").attr('src', 'down_arrow.jpg');
}

and access it as

$(function () {
    if($("#toggle").onclick){
      var arrow =  new ArrowDir(); // call the constructor to create a new instance
      arrow.down(); // invoke the method
    };
});

answered Jun 19, 2013 at 15:58

PSL

124k21 gold badges257 silver badges243 bronze badges

4 Comments

Niet the Dark Absol Over a year ago

Sorry, but no. This would only work if the function call were new ArrowDir().down().

Niet the Dark Absol Over a year ago

It adds excessive complexity?

PSL Over a year ago

@Kolink Why. it just simple protoyping right. I did not say it has to be this way either.

PSL Over a year ago

@Kolink sure but no i dont agree regd more work, i am just adding to to the prototype. its just another way. Dont this this is worth a downvote.

Jonny Sooter · Accepted Answer · 2013-06-19 16:04:06Z

0

ArrowDir().down() here's your problem. Just because you define a variable in the ArrowDir function doesn't make it a method/property of it. You have to use Prototype Inheritance.

EDIT:

//Something like this:
ArrowDir.prototype.down = function() {
    //Do stuff
}

Now you can call ArrowDir.down(). Doing this extends the properties (things it can do) of the object ArrowDir. You're adding a method to it.

edited Jun 19, 2013 at 16:04

answered Jun 19, 2013 at 15:57

Jonny Sooter

2,4271 gold badge24 silver badges40 bronze badges

3 Comments

Niet the Dark Absol Over a year ago

"You have to use Prototype Inheritance" - Care to explain how?

Jonny Sooter Over a year ago

I think this video can explain much better then I ever could: tutsplus.com/lesson/…

Niet the Dark Absol Over a year ago

See this MSO answer.

Andrew · Accepted Answer · 2013-06-19 16:18:08Z

0

The var up and down you have defined inside ArrowDir are not accessible outside the scope of that function.

The simplest way you could fix this, if this is a one-time kind of function, is just to put the up/down behavior in your jQuery function, like this:

$(function () {
    if($("#toggle").onclick){
        $("#arrow").attr('src','up_arrow.jpg');
    } else {
        $("#arrow").attr('src','down_arrow.jpg');
    }
});

If you just want to namespace these functions for reusability you could make an object literal instead:

ArrowDir = {
  up: function(){
    $("#arrow").attr('src','up_arrow.jpg');
  },
  down: function(){
    $("#arrow").attr('src','down_arrow.jpg');
  }
};

Then you can call: ArrowDir.up() or ArrowDir.down() elsewhere.

For what it's worth, if your goal is just to namespace these functions for reusability, I would say the object literal syntax makes more sense to me.

Or, if you really want to do it as a function call, as Kolink has pointed out, the up/down functions need to be in the return value. You could write that like this...

function ArrowDir() {
  var up = function(){
    $("#arrow").attr('src','up_arrow.jpg');
  }
  var down = function(){
    $("#arrow").attr('src','down_arrow.jpg');
  }
  return {up:up,down:down};
}

Or like this...

function ArrowDir() {
  return {
    up: function(){
      $("#arrow").attr('src','up_arrow.jpg');
    },
    down: function(){
      $("#arrow").attr('src','down_arrow.jpg');
    }
  };
}

Now calling ArrowDir().down() should work.

edited Jun 19, 2013 at 16:18

answered Jun 19, 2013 at 15:57

Andrew

43.2k53 gold badges184 silver badges287 bronze badges

2 Comments

Niet the Dark Absol Over a year ago

Kinda, since you're completely changing the structure of their code. What if ArrowDir is used elsewhere?

Andrew Over a year ago

Ok @Kolink, much more discussion added with multiple different approaches including just fixing his return value...

Collectives™ on Stack Overflow

Javascript function undefined?

5 Answers 5

Comments

Comments

4 Comments

3 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

4 Comments

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related