Event handler cannot access Object method in JavaScript

Question

How can I access util.log() method from a static html event handler?

In other words, when I click the checkbox, I like to call util.log method.

onclick="util.log(\'hey\')" <-- how to rewrite the event function here?

I know all the answers are correct down here but is it possible to access local methods while insert the html into innerHTML?

thank you

var utilities = function() {
 var util = this;

 util.log = function(msg){
  alert(msg);
 };

 var p = document.createElement('p');
 p.innerHTML = '<input type="checkbox" onclick="util.log(\'hey\')" value="1">Check me'; 
 // this part has to be plain html, because there is this table generator class 
 // will insert this to cell as innerHTML. That's why I can't change the table class. 
};

Do you want an alert saying "hey" when you click the checkbox? — Alexander Bird
– Alexander Bird, Commented Feb 5, 2010 at 2:30
yes, but eventually, how to call an object method from hard-coded events? — Nizzy
– Nizzy, Commented Feb 5, 2010 at 2:32

Ben Zotto · Accepted Answer · 2010-02-05 02:37:55Z

2

Your util object is not in the global scope; it's hidden inside the utilities object. The click handler will run in the scope of the global object, which is why it can't see util at all.

If you can't change the way the HTML strings are created, then you'll need to declare util outside the utilities function, in other words, just this in the page:

 var util = {};
 util.log = function(msg){
  alert(msg);
 };

 var p = document.createElement('p');
 p.innerHTML = '<input type="checkbox" onclick="util.log(\'hey\')" value="1">Check me'; // this part is a legacy code and I have no control over to rewrite it as HTMLObjectElement way

answered Feb 5, 2010 at 2:37

Ben Zotto

71.2k23 gold badges145 silver badges207 bronze badges

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

Comments

Hogan · Accepted Answer · 2010-02-05 02:35:43Z

1

try this javascript instead:

var util = {
 log : function(msg){
  alert(msg);
 };
};

answered Feb 5, 2010 at 2:35

Hogan

70.7k10 gold badges83 silver badges119 bronze badges

Collectives™ on Stack Overflow

Event handler cannot access Object method in JavaScript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related