Why is my javascript call to an object method not working?

Question

I am trying to learn object oriented javascript. Why is this call to an object method not working (no alert)?

When you click on the link, an alert is supposed to appear stating how old Bob is.

In case the link ever disappears, here is the HTML:

<a href="#" onclick="bob.say()">eh</a>

and here is my javascript.

function guy(person_name) {
  this.name = person_name;
  this.age = 32;
  this.say = function() {
    alert(this.name + " is " + this.age);
    return false;
  }
}

  var bob = new guy("Bob");

Chrome Web Developer Console states

Uncaught ReferenceError: bob is not defined

However, I think I defined bob with var bob = new guy("Bob");.

SLaks · Accepted Answer · 2012-03-15 02:00:57Z

5

You need to select one of the no wrap options in jsFiddle's left pane.

Otherwise, jsFiddle wraps your code in an event handler, and poor bob is stuck as a local variable.

Demo

answered Mar 15, 2012 at 2:00

SLaks

891k182 gold badges1.9k silver badges2k bronze badges

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

Comments

Michael Berkowski · Accepted Answer · 2012-03-15 01:57:46Z

2

You are missing the closing } on say().

Beyond that, you must not return a value from the object constructor function. Doing so will simply set the variable bob to false.

function Guy(person_name) {
  this.name = person_name;
  this.age = 32;
  this.say = function() {
    alert(this.name + " is " + this.age);};
}

var bob = new Guy("Bob");

Note also that JavaScript conventions typically dicatate that an object constructor be capitalized like function Guy()

Here is the updated fiddle.

answered Mar 15, 2012 at 1:57

Michael Berkowski

271k47 gold badges450 silver badges395 bronze badges

4 Comments

dangerChihuahua007 Over a year ago

Thank you, not returning in the constructor makes sense. Without returning false though, how do I prevent the click event from bubbling up the DOM tree?

SLaks Over a year ago

@DavidFaux: Put return false; in the inline handler.

SLaks Over a year ago

@Michael: David's Javascript is actually fully valid, but mis-indented. See my answer.

Michael Berkowski Over a year ago

@SLaks No, the original fiddle posted before the code was posted here was missing the } jsfiddle.net/hxPqJ

hugomg · Accepted Answer · 2012-03-15 01:59:58Z

0

When I ran you code a message of

bob is not defined

showed up on the console. I think this is a JSFiddle quirk, since things worked when I changed things to set the onclick on the Javascript side instead of in the HTML.

<a href="#" id="foo">eh</a>

document.getElementById("foo").onclick = function(){ bob.say(); }

http://jsfiddle.net/hxPqJ/6/

answered Mar 15, 2012 at 1:59

hugomg

70.4k30 gold badges168 silver badges257 bronze badges

Collectives™ on Stack Overflow

Why is my javascript call to an object method not working?

3 Answers 3

Comments

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related