Dynamically adding an onClick event.

[Daz]

Hello everyone. I am sure the answer to my question is simple, but I
can't seem to dynamically add an onClick event to my script.

I have a table which is generated dynamically, I am just struggling
getting an onClick event to show in the HTML source.

Any help would be appreciated. Here is a block of my current code which
doesn't work.

var tr1 = document.create Element('tr');
tr1.style.backg roundColor = "blue";
var td1 = document.create Element('td');
var b = document.create Element('b');
var titleSpan = document.create Element('span') ;
titleSpan.style .color = "white";
table.appendChi ld(tr1);
tr1.appendChild (td1);

td1.appendChild (b);
b.appendChild(t itleSpan);
titleSpan.inner HTML = menuTitle;
titleSpan.onCli ck = "this.toggle()" ;

I am assuming that I am missing something with the syntax?

All the best.

Daz.

[ASM]

Daz a écrit :

Hello everyone. I am sure the answer to my question is simple, but I
can't seem to dynamically add an onClick event to my script.

I have a table which is generated dynamically, I am just struggling
getting an onClick event to show in the HTML source.

Any help would be appreciated. Here is a block of my current code which
doesn't work.

var tr1 = document.create Element('tr');
tr1.style.backg roundColor = "blue";
var td1 = document.create Element('td');
var titleSpan = document.create Element('span') ;
titleSpan.style .color = "white";

titleSpan.style .fontWeight = "bold";
titleSpan.onCli ck = function() {this.toggle(); };
titleSpan.inner HTML = menuTitle;

td1.appendChild (titleSpan);
tr1.appendChild (td1);
tbody.appendChi ld(tr1);

use tbody instead of table
..

[Daz]

ASM wrote:

Daz a écrit :

Hello everyone. I am sure the answer to my question is simple, but I
can't seem to dynamically add an onClick event to my script.

I have a table which is generated dynamically, I am just struggling
getting an onClick event to show in the HTML source.

Any help would be appreciated. Here is a block of my current code which
doesn't work.

var tr1 = document.create Element('tr');
tr1.style.backg roundColor = "blue";
var td1 = document.create Element('td');
var titleSpan = document.create Element('span') ;
titleSpan.style .color = "white";

titleSpan.style .fontWeight = "bold";
titleSpan.onCli ck = function() {this.toggle(); };
titleSpan.inner HTML = menuTitle;

td1.appendChild (titleSpan);
tr1.appendChild (td1);
tbody.appendChi ld(tr1);

use tbody instead of table
.

Thanks ASM. my table variable is actually a reference to tbody. You're
right, though. I should have named it tbody and not table.

I still can't get it to work. For some reason, the toggle function is
not working at all. I have tried adding the function to the onClick
event directly, and it still doesn't work... I don't even get an
error/warning in my JavaScript Console...

I know it's something I am doing wrong, I just can't figure out what.

Here is my code. It looks messy because I am trying to figure out how
things work...

//********** CODE START **********

var table = document.getEle mentById('ctg_t able');
var tableWidth = 80;

function initPage()
{
table.parentNod e.style.width = tableWidth + "%";
displayInputDia log();
var row1 = new menuItem("test" );
}

function displayInputDia log()
{
var tr = document.create Element('tr');
tr.setAttribute ("id", "rInputDialog") ;
tr.style.height = "20%";
var td = document.create Element('td');
textarea = document.create Element('textar ea');
textarea.setAtt ribute("name", "inputDialo g");
textarea.setAtt ribute("id", "inputDialo g");
textarea.style. width = "100%";
textarea.style. height = "100%";
textarea.style. borderStyle = "ridge";
table.appendChi ld(tr);
tr.appendChild( td);
td.appendChild( textarea);
}

function menuItem (menuTitle)
{
var tr1 = document.create Element('tr');
tr1.style.backg roundColor = "blue";
var td1 = document.create Element('td');
var b = document.create Element('b');
var titleSpan = document.create Element('span') ;
titleSpan.style .color = "white";
table.appendChi ld(tr1);
tr1.appendChild (td1);
td1.appendChild (b);
b.appendChild(t itleSpan);
titleSpan.inner HTML = menuTitle;
var tr2 = document.create Element('tr');
var td2 = document.create Element('td');
table.appendChi ld(tr2);
tr2.appendChild (td2);
tr2.style.borde rStyle = 'ridge';
tr2.style.borde rColor = "green";
td2.innerHTML = 'blah';
titleSpan.onCli ck = function()
{
var textarea = document.getEle mentById('input Dialog');
textarea.value = "blah"
}
}

initPage();

//************ CODE END ************

Many thanks for your input.

If you can offer any more constructive criticism, it would be received
gracefully as I would rather do this right, than go about it the wrong
way.

Daz.

[ASM]

Daz a écrit :

Thanks ASM. my table variable is actually a reference to tbody. You're
right, though. I should have named it tbody and not table.

I still can't get it to work. For some reason, the toggle function is
not working at all. I have tried adding the function to the onClick
event directly, and it still doesn't work... I don't even get an
error/warning in my JavaScript Console...

I know it's something I am doing wrong, I just can't figure out what.

Here is my code. It looks messy because I am trying to figure out how
things work...

//********** CODE START **********

var table = document.getEle mentById('ctg_t able');
var tableWidth = 80;

function initPage()
{
table.parentNod e.style.width = tableWidth + "%";
displayInputDia log();
var row1 = new menuItem("test" );
}

function displayInputDia log()
{
var tr = document.create Element('tr');
tr.setAttribute ("id", "rInputDialog") ;
tr.style.height = "20%";
var td = document.create Element('td');
textarea = document.create Element('textar ea');

IE would prefer :
textarea.name = "inputDialo g";
textarea.id = "inputDialo g";

textarea.setAtt ribute("name", "inputDialo g");
textarea.setAtt ribute("id", "inputDialo g");
textarea.style. width = "100%";
textarea.style. height = "100%";
textarea.style. borderStyle = "ridge";
table.appendChi ld(tr);
tr.appendChild( td);
td.appendChild( textarea);

why do you append something to your td not more there ?

td.appendChild( textarea); // from inside
tr.appendChild( td); // to outside
table.appendChi ld(tr); // boxes

}

function menuItem (menuTitle)
{
var tr1 = document.create Element('tr');
tr1.style.backg roundColor = "blue";
var td1 = document.create Element('td');
var b = document.create Element('b');
var titleSpan = document.create Element('span') ;
titleSpan.style .color = "white";
table.appendChi ld(tr1);
tr1.appendChild (td1);
td1.appendChild (b);
b.appendChild(t itleSpan);
titleSpan.inner HTML = menuTitle;
var tr2 = document.create Element('tr');
var td2 = document.create Element('td');

Same as I previously said : better to append in right order

p or span -td -tr -tbody -table -body

table.appendChi ld(tr2);
tr2.appendChild (td2);
tr2.style.borde rStyle = 'ridge';
tr2.style.borde rColor = "green";
td2.innerHTML = 'blah';
titleSpan.onCli ck = function()

perhaps :
titleSpan.oncli ck = function()

{

alert('seen');

var textarea = document.getEle mentById('input Dialog');
textarea.value = "blah"
}
}

initPage();

//************ CODE END ************

Many thanks for your input.

a question : is this table in a form ?

[Daz]

ASM wrote:

IE would prefer :
textarea.name = "inputDialo g";
textarea.id = "inputDialo g";

Ok, I have changed this in my code. Thanks :)

I'd just like to point out that I don't have access to Internet
Explorer, so I am using Firefox. As far as I know it shouldn't be a big
issue, but I know some things are different between the way that
Internet Explorer and Firefox process JavaScript, or rather the syntax
and attributes which should be used.

why do you append something to your td not more there ?

Sorry, I don't understand what you mean. Are you suggesting I use
innerHTML instead of appending textarea?

td.appendChild( textarea); // from inside
tr.appendChild( td); // to outside
table.appendChi ld(tr); // boxes

Ok, I have changed my code to reflect this. It makes more sense doing
it the way you suggested, although I was simply going by the examples
by Mark Kahn at
http://www.htmlgoodies.com/primers/j...le.php/3594621

Same as I previously said : better to append in right order

Agreed, and already done.

p or span -td -tr -tbody -table -body

There are no body tags in my HTML. Would this make any difference as
everything goes inside my <tbody>? Everything is displaying correctly,
it's just this single function that is refusing to fire.

perhaps :
titleSpan.oncli ck = function()

I have tried just doing:
titleSpan.onCli ck = function() { alert('blah'); }
....and it still won't fire...

a question : is this table in a form ?

No, I'm not, and I don't plan to either. :)

Here is the code modified following your suggestions. I have included
the HTML also, in case I have made a stupid mistake.

//***** CODE START *****

/*************
* HTML code *
************/

<head>
<title>Colour Text Generator</title>
</head>
<table style="width: 100%;">
<tbody id="ctg_table" >
</tbody>
</table>
<script language="javas cript" type="text/javascript" src="text_gener ator.js"></script>
<noscript>
You must enabled JavaScript in order to use this page.<br /><br />
If you do not have a JavaScript enabled browser, please download Firefox
for free from <a href="http://www.getfirefox. com">www.getfir efox.com</a>.
</noscript>

//*************** ***
* JavaScript code *
*************** ***/

var tbody = document.getEle mentById('ctg_t able');
var tableWidth = 80;
var row1 = null;
function initPage()
{
tbody.parentNod e.style.width = tableWidth + "%";
displayInputDia log();
row1 = new menuItem("test" );
}

function displayInputDia log()
{
var tr = document.create Element('tr');
tr.setAttribute ("id", "rInputDialog") ;
tr.style.height = "20%";
var td = document.create Element('td');
var textarea = document.create Element('textar ea');
textarea.name = "inputDialo g";
textarea.id = "inputDialo g";
textarea.style. width = "100%";
textarea.style. height = "100%";
textarea.style. borderStyle = "ridge";

td.appendChild( textarea);
tr.appendChild( td);
tbody.appendChi ld(tr);
}

function menuItem (menuTitle)
{
var tr1 = document.create Element('tr');
tr1.style.backg roundColor = "blue";

var td1 = document.create Element('td');

var titleSpan = document.create Element('span') ;
titleSpan.style .color = "white";
titleSpan.style .fontWeight = "bold";
titleSpan.onCli ck = function() { alert('blah'); }
titleSpan.inner HTML = menuTitle;

td1.appendChild (titleSpan);
tr1.appendChild (td1);
tbody.appendChi ld(tr1);

var tr2 = document.create Element('tr');
var td2 = document.create Element('td');

td2.innerHTML = 'blah';
tr2.appendChild (td2);
tbody.appendChi ld(tr2);
}

initPage();

//****** CODE END ******

Many thanks.

Daz.

[Daz]

ASM wrote:

a question : is this table in a form ?

I take that back. Yes, the table IS going to be in a form. Either that,
or there will be several forms within the table. What made you ask?

[VK]

Daz wrote:

var titleSpan = document.create Element('span') ;
titleSpan.onCli ck = "this.toggle()" ;

titleSpan implements DOM interface which includes intrinsic [onclick]
event listener. This listener can be set to a function reference. In
case of click event the referenced function will be called. So the
first error: string instead of function reference.
The second error is that JavaScript is case-sensitive: unlike HTTP tags
and attribute names This way in your HTML source you use something
like:
<SPAN onClick="alert( this)">Text</span>
but in your JavaScript program the handler has to be named exactly as
it is: "onclick" (all lower case). Otherwise the program will decide
that you want to create new property "onClick" and assign a string
value to it (this is what it's doing). With all necessary corrections
the line will be:
titleSpan.oncli ck = function(){this .toggle();};
or (to keep the "stringifie d" approach):
titleSpan.oncli ck = new Function("this. toggle();");

[ASM]

Daz a écrit :

ASM wrote:

>IE would prefer :
textarea.name = "inputDialo g";
textarea.id = "inputDialo g";

Ok, I have changed this in my code. Thanks :)

I'd just like to point out that I don't have access to Internet
Explorer,

Anyway it is better for each browser.

>td.appendChild (textarea); // from inside
tr.appendChild (td); // to outside
table.appendCh ild(tr); // boxes

Ok, I have changed my code to reflect this. It makes more sense doing
it the way you suggested, although I was simply going by the examples
by Mark Kahn at
http://www.htmlgoodies.com/primers/j...le.php/3594621

I don't know this Mark :-)
But it seems to me we create elements that are virtual, then we append
them to their container, so it appears natural to do it from inside box
to the last outside one.
(even if modern browsers (FF) can understand what is the sens we adopt).

> p or span -td -tr -tbody -table -body

that is to show the design.

There are no body tags in my HTML.

If you have any tbody in your table, or any body in your html, the
browser will create them (at least in its mind) so you always can use them.

>perhaps :
titleSpan.oncli ck = function()

I have tried just doing:

No you haven't ! did you notice the c in lowercase ?

titleSpan.onCli ck = function() { alert('blah'); }
...and it still won't fire...

change your onClick in onclick and all will be OK.

>a question : is this table in a form ?

No, I'm not, and I don't plan to either. :)

If you use elements of form (input, textarea) you would have set them in
a form (simplest an cleanest : outside the table)

--
ASM

[Good Man]

"Daz" <cu********@gma il.comwrote in news:1163250979 .382213.122970
@b28g2000cwb.go oglegroups.com:

Hello everyone. I am sure the answer to my question is simple, but I
can't seem to dynamically add an onClick event to my script.

I have a table which is generated dynamically, I am just struggling
getting an onClick event to show in the HTML source.

Two things. First, nothing dynamically generated will show up in your
source code. The source code is the document as rendered when
downloaded from the server. You *will* be able to see the changes in
the DOM structure using Firefox and its DOM-inspector (ctrl-shift-i) or
the Firebug addon.

Secondly, setting onclick (or any 'on') event to a script created DOM
element is a little tricky. You have to do it via a function.

http://p2p.wrox.com/topic.asp?TOPIC_ID=34541 (second post on the screen,
followup by OP)

see ya

[Daz]

ASM wrote:

Daz a écrit :

ASM wrote:

IE would prefer :
textarea.name = "inputDialo g";
textarea.id = "inputDialo g";

Ok, I have changed this in my code. Thanks :)

I'd just like to point out that I don't have access to Internet
Explorer,

Anyway it is better for each browser.

td.appendChild( textarea); // from inside
tr.appendChild( td); // to outside
table.appendChi ld(tr); // boxes

Ok, I have changed my code to reflect this. It makes more sense doing
it the way you suggested, although I was simply going by the examples
by Mark Kahn at
http://www.htmlgoodies.com/primers/j...le.php/3594621

I don't know this Mark :-)
But it seems to me we create elements that are virtual, then we append
them to their container, so it appears natural to do it from inside box
to the last outside one.
(even if modern browsers (FF) can understand what is the sens we adopt).

p or span -td -tr -tbody -table -body

that is to show the design.

There are no body tags in my HTML.

If you have any tbody in your table, or any body in your html, the
browser will create them (at least in its mind) so you always can use them.

perhaps :
titleSpan.oncli ck = function()

I have tried just doing:

No you haven't ! did you notice the c in lowercase ?

titleSpan.onCli ck = function() { alert('blah'); }
...and it still won't fire...

change your onClick in onclick and all will be OK.

a question : is this table in a form ?

No, I'm not, and I don't plan to either. :)

If you use elements of form (input, textarea) you would have set them in
a form (simplest an cleanest : outside the table)

--
ASM

Brilliant! onClick has been changed to onclick and now it's functioning
perfectly. Many thanks for your input. I have seen it as onClick on
many online examples. I am not sure why this might be, however, I now
know to use onclick. :)