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.createElement('tr');
tr1.style.backgroundColor = "blue";
var td1 = document.createElement('td');
var b = document.createElement('b');
var titleSpan = document.createElement('span');
titleSpan.style.color = "white";
table.appendChild(tr1);
tr1.appendChild(td1);

td1.appendChild(b);
b.appendChild(titleSpan);
titleSpan.innerHTML = menuTitle;
titleSpan.onClick = "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.createElement('tr');
tr1.style.backgroundColor = "blue";
var td1 = document.createElement('td');
var titleSpan = document.createElement('span');
titleSpan.style.color = "white";

titleSpan.style.fontWeight = "bold";
titleSpan.onClick = function() {this.toggle(); };
titleSpan.innerHTML = menuTitle;

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

use tbody instead of table
..

 

[Daz]

Daz a écrit :

var tr1 = document.createElement('tr');
tr1.style.backgroundColor = "blue";
var td1 = document.createElement('td');
var titleSpan = document.createElement('span');
titleSpan.style.color = "white";

titleSpan.style.fontWeight = "bold";
titleSpan.onClick = function() {this.toggle(); };
titleSpan.innerHTML = menuTitle;

td1.appendChild(titleSpan);
tr1.appendChild(td1);
tbody.appendChild(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.getElementById('ctg_table');
var tableWidth = 80;

function initPage()
{
table.parentNode.style.width = tableWidth + "%";
displayInputDialog();
var row1 = new menuItem("test");
}

function displayInputDialog()
{
var tr = document.createElement('tr');
tr.setAttribute("id", "rInputDialog");
tr.style.height = "20%";
var td = document.createElement('td');
textarea = document.createElement('textarea');
textarea.setAttribute("name", "inputDialog");
textarea.setAttribute("id", "inputDialog");
textarea.style.width = "100%";
textarea.style.height = "100%";
textarea.style.borderStyle = "ridge";
table.appendChild(tr);
tr.appendChild(td);
td.appendChild(textarea);
}

function menuItem (menuTitle)
{
var tr1 = document.createElement('tr');
tr1.style.backgroundColor = "blue";
var td1 = document.createElement('td');
var b = document.createElement('b');
var titleSpan = document.createElement('span');
titleSpan.style.color = "white";
table.appendChild(tr1);
tr1.appendChild(td1);
td1.appendChild(b);
b.appendChild(titleSpan);
titleSpan.innerHTML = menuTitle;
var tr2 = document.createElement('tr');
var td2 = document.createElement('td');
table.appendChild(tr2);
tr2.appendChild(td2);
tr2.style.borderStyle = 'ridge';
tr2.style.borderColor = "green";
td2.innerHTML = 'blah';
titleSpan.onClick = function()
{
var textarea = document.getElementById('inputDialog');
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.getElementById('ctg_table');
var tableWidth = 80;

function initPage()
{
table.parentNode.style.width = tableWidth + "%";
displayInputDialog();
var row1 = new menuItem("test");
}

function displayInputDialog()
{
var tr = document.createElement('tr');
tr.setAttribute("id", "rInputDialog");
tr.style.height = "20%";
var td = document.createElement('td');
textarea = document.createElement('textarea');

IE would prefer :
textarea.name = "inputDialog";
textarea.id = "inputDialog";

textarea.setAttribute("name", "inputDialog");
textarea.setAttribute("id", "inputDialog");
textarea.style.width = "100%";
textarea.style.height = "100%";
textarea.style.borderStyle = "ridge";
table.appendChild(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.appendChild(tr); // boxes

}

function menuItem (menuTitle)
{
var tr1 = document.createElement('tr');
tr1.style.backgroundColor = "blue";
var td1 = document.createElement('td');
var b = document.createElement('b');
var titleSpan = document.createElement('span');
titleSpan.style.color = "white";
table.appendChild(tr1);
tr1.appendChild(td1);
td1.appendChild(b);
b.appendChild(titleSpan);
titleSpan.innerHTML = menuTitle;
var tr2 = document.createElement('tr');
var td2 = document.createElement('td');

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

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

table.appendChild(tr2);
tr2.appendChild(td2);
tr2.style.borderStyle = 'ridge';
tr2.style.borderColor = "green";
td2.innerHTML = 'blah';
titleSpan.onClick = function()

perhaps :
titleSpan.onclick = function()

{ alert('seen');
var textarea = document.getElementById('inputDialog');
textarea.value = "blah"
}
}

initPage();

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

Many thanks for your input.

a question : is this table in a form ?

 

[Daz]

IE would prefer :
textarea.name = "inputDialog";
textarea.id = "inputDialog";

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.appendChild(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/jsp/article.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

perhaps :
titleSpan.onclick = function()

I have tried just doing:
titleSpan.onClick = 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="javascript" type="text/javascript" src="text_generator.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.getfirefox.com</a>.
</noscript>

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

var tbody = document.getElementById('ctg_table');
var tableWidth = 80;
var row1 = null;
function initPage()
{
tbody.parentNode.style.width = tableWidth + "%";
displayInputDialog();
row1 = new menuItem("test");
}

function displayInputDialog()
{
var tr = document.createElement('tr');
tr.setAttribute("id", "rInputDialog");
tr.style.height = "20%";
var td = document.createElement('td');
var textarea = document.createElement('textarea');
textarea.name = "inputDialog";
textarea.id = "inputDialog";
textarea.style.width = "100%";
textarea.style.height = "100%";
textarea.style.borderStyle = "ridge";

function menuItem (menuTitle)
{
var tr1 = document.createElement('tr');
tr1.style.backgroundColor = "blue";

var td1 = document.createElement('td');

var titleSpan = document.createElement('span');
titleSpan.style.color = "white";
titleSpan.style.fontWeight = "bold";
titleSpan.onClick = function() { alert('blah'); }
titleSpan.innerHTML = menuTitle;

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

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

initPage();

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

Many thanks.

Daz.

 

[Daz]

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]

var titleSpan = document.createElement('span');
titleSpan.onClick = "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.onclick = function(){this.toggle();};
or (to keep the "stringified" approach):
titleSpan.onclick = new Function("this.toggle();");

 

[ASM]

Daz a écrit :

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.

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/jsp/article.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).

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.

I have tried just doing:

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

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

change your onClick in onclick and all will be OK.

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)

 

[Daz]

Daz a écrit :

Anyway it is better for each browser.


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).


that is to show the design.


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.



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


change your onClick in onclick and all will be OK.


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

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.

 

[Daz]

var titleSpan = document.createElement('span');
titleSpan.onClick = "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.onclick = function(){this.toggle();};
or (to keep the "stringified" approach):
titleSpan.onclick = new Function("this.toggle();");

Fantastic Explanation! Many thanks.

 

[Daz]

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.

I use the Web Developers plugin which shows me the 'generated' source.
It is by far the best plugin I have ever install with Firefox. For some
reason the DOM inspector doesn't work. There is a shortcut to it from
within one of the menus in my WDtk, but it does nothing. Also
CTRL+SHIFT+I does nothing for me either. Bizarre...

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

Great. Thanks for your help.