onclick problem

Xu, Qian · Apr 24, 2008

Hi All,

I wrote some code but it doesn't work.

------------------------------------------
<html>
<head>
<script src="my_broken_script.js"></script>
</head>
<body>
Hello World
</body>
</html>
------------------------------------------
// my_broken_script.js
var MyClass = {
init : function() {
var injectCode = '<button onclick="MyClass.btnClickHandler"
id="btn1">Button 1</button>';
var bd = document.body;
bd.innerHTML = injectCode + bd.innerHTML;
},
btnClickHander : function() {
alert('Done');
}
}

MyClass.init(); // <-- Error
------------------------------------------

Browser says "MyClass" has no property. But if I replace
onclick="MyClass.btnClickHandler" with onclick="alert(0)", it works. How
to bind an event to MyClass.btnClickHander ?

BTW: If I bind this event using Prototype, it works.

Tom de Neef · Apr 24, 2008

Xu said:
------------------------------------------
<html>
<head>
<script src="my_broken_script.js"></script>
</head>
<body>
Hello World
</body>
</html>
------------------------------------------
// my_broken_script.js
var MyClass = {
init : function() {
var injectCode = '<button onclick="MyClass.btnClickHandler"
id="btn1">Button 1</button>';
var bd = document.body;
bd.innerHTML = injectCode + bd.innerHTML;
},
btnClickHander : function() {
alert('Done');
}
}

MyClass.init(); // <-- Error
------------------------------------------

Browser says "MyClass" has no property. But if I replace
onclick="MyClass.btnClickHandler" with onclick="alert(0)", it works. How
to bind an event to MyClass.btnClickHander ?

A few changes help:
<html>
<head>
<script src="my_broken_script.js"></script>
</head>
<body>
Hello World
</body onload = MyClass.init()>
----------^ so that the DOM is complete
</html>

// my_broken_script.js
var MyClass = {
init : function() {
var injectCode = '<button onclick="MyClass.btnClickHandler()"
------------------------------------------------------------------^ brackets
id="btn1">Button 1</button>';
var bd = document.body;
bd.innerHTML = injectCode + bd.innerHTML;
},
btnClickHandler : function() {
----------------^ spelling "l" missing
alert('Done');
}
}

// MyClass.init();
^ now in onload

Tom

Xu, Qian · Apr 25, 2008

Tom said:
// MyClass.init();
^ now in onload

Tom

Thanks, but this does not help. I am more interested in Why?

Xu, Qian · Apr 25, 2008

Tom said:
// MyClass.init();
^ now in onload

Tom

Thanks Tom, but this does not help. I am more interested in Why?

One thing I do not get, when button is clicked successfully,
MyClass.btnClickHandler would be called. I called "alert(this.tagName)",
it is "BUTTON" not "MyClass". The "this" pointer should not be MyClass?

Tom de Neef · Apr 25, 2008

"Xu, Qian"wrote:

Thanks Tom, but this does not help. I am more interested in Why?

One thing I do not get, when button is clicked successfully,
MyClass.btnClickHandler would be called. I called "alert(this.tagName)",
it is "BUTTON" not "MyClass". The "this" pointer should not be MyClass?

I suggested three changes. I tested the code with these changes. It works
fine.
Tom

Álvaro G. Vicario · Apr 25, 2008

Xu, Qian escribió:

<html>
<head>
<script src="my_broken_script.js"></script>
</head>
<body>
Hello World
</body>
</html>
------------------------------------------
// my_broken_script.js
var MyClass = {
init : function() {
var injectCode = '<button onclick="MyClass.btnClickHandler"
id="btn1">Button 1</button>';
var bd = document.body;
bd.innerHTML = injectCode + bd.innerHTML;
},
btnClickHander : function() {
alert('Done');
}
}

MyClass.init(); // <-- Error

I get this error:

bd has no properties
bd.innerHTML = injectCode + bd.innerHTML;

You call init() from <head> tag, with no timer or event handling. At
that point, it's likely that the isn't any <body> yet.

You should launch init() when page has loaded or when DOM is ready:

window.onload=function(){
MyClass.init();
};

The above lines are only a quick example, it's not the recommended way
to do it because you'll overwrite any other onload actions you may have
defined. If you get the addEvent() function from:

http://dean.edwards.name/weblog/2005/10/add-event2/

.... you could change this into:

addEvent(window, "load", function(){
MyClass.init();
});

You can also Google for "onDomReady" or "domReady".

Xu, Qian · Apr 25, 2008

Tom said:
"Xu, Qian"wrote:

I suggested three changes. I tested the code with these changes. It works
fine.
Tom

Thanks, it was my fault.
1. It works when I use attachEventListner (for Firefox)
2. I should write

this.btnClickHander = function() {
// accessing methods or properties of another class works now

}

Xu, Qian · Apr 25, 2008

Álvaro G. Vicario said:
Xu, Qian escribió:

I get this error:

bd has no properties
bd.innerHTML = injectCode + bd.innerHTML;

You call init() from <head> tag, with no timer or event handling. At
that point, it's likely that the isn't any <body> yet.

You should launch init() when page has loaded or when DOM is ready:

window.onload=function(){
MyClass.init();
};

The above lines are only a quick example, it's not the recommended way
to do it because you'll overwrite any other onload actions you may have
defined. If you get the addEvent() function from:

http://dean.edwards.name/weblog/2005/10/add-event2/

... you could change this into:

addEvent(window, "load", function(){
MyClass.init();
});

You can also Google for "onDomReady" or "domReady".

Thanks for the tip. Yes, I should wait until the DOM tree has been
loaded completely. Currently I use attachEventListner for Firefox and it
works.

Tom de Neef · Apr 25, 2008

this.btnClickHander = function() {

I think you still miss an "l": Handler instead of Hander
Tom

DJForm Login Help!	1	Sep 28, 2024
Javascipt problem.	22	Nov 29, 2022
Script stops working when using variables to save time typing...	4	Oct 31, 2022
How do I output this recursive function correctly to a web browser?	2	Dec 17, 2022
Filename undefined for Blob ?	1	Oct 28, 2023
Index.php with bootstrap implementation and extern sites inclusion	0	Oct 30, 2024
Javascrip code wont run properly.	2	Oct 2, 2022
Google sheets song request	3	Apr 19, 2022

onclick problem

Xu, Qian

Tom de Neef

Xu, Qian

Xu, Qian

Tom de Neef

Álvaro G. Vicario

Xu, Qian

Xu, Qian

Tom de Neef

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads