Dynamically adding an onClick event.

D

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

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.
Click to expand...

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

Daz

ASM said:
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
.
Click to expand...
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.
 
A

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');
Click to expand...

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);
Click to expand...

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');
Click to expand...

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()
Click to expand...

perhaps :
titleSpan.onclick = function()
{ alert('seen');
var textarea = document.getElementById('inputDialog');
textarea.value = "blah"
}
}

initPage();

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

Many thanks for your input.
Click to expand...

a question : is this table in a form ?
 
D

Daz

ASM said:
IE would prefer :
textarea.name = "inputDialog";
textarea.id = "inputDialog";
Click to expand...
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 ?
Click to expand...
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
Click to expand...
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
Click to expand...
Agreed, and already done.
p or span -> td -> tr -> tbody -> table -> body
Click to expand...
There are no body tags in my HTML. Would this make any difference as
perhaps :
titleSpan.onclick = function()
Click to expand...
I have tried just doing:
titleSpan.onClick = function() { alert('blah'); }
....and it still won't fire...
a question : is this table in a form ?
Click to expand...
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 *
************/
Click to expand...
<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 *
******************/
Click to expand...
var tbody = document.getElementById('ctg_table');
var tableWidth = 80;
var row1 = null;
function initPage()
{
tbody.parentNode.style.width = tableWidth + "%";
displayInputDialog();
row1 = new menuItem("test");
}
Click to expand...
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";
Click to expand...
var td1 = document.createElement('td');
Click to expand...
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');
Click to expand...
td2.innerHTML = 'blah';
tr2.appendChild(td2);
tbody.appendChild(tr2);
}
Click to expand...
initPage();
Click to expand...

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

Many thanks.

Daz.
 
D

Daz

ASM said:
a question : is this table in a form ?
Click to expand...
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?
 
V

VK

Daz said:
var titleSpan = document.createElement('span');
titleSpan.onClick = "this.toggle()";
Click to expand...

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();");
 
A

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,
Click to expand...

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
Click to expand...

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.
Click to expand...

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:
Click to expand...

No you haven't ! did you notice the c in lowercase ?
titleSpan.onClick = function() { alert('blah'); }
...and it still won't fire...
Click to expand...

change your onClick in onclick and all will be OK.
No, I'm not, and I don't plan to either. :)
Click to expand...

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

Daz

ASM said:
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)
Click to expand...
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. :)
 
D

Daz

VK said:
Daz said:
var titleSpan = document.createElement('span');
titleSpan.onClick = "this.toggle()";
Click to expand...

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();");
Click to expand...

Fantastic Explanation! Many thanks. :)
 
D

Daz

Good said:
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.
Click to expand...
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
Click to expand...
Great. Thanks for your help. :)
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Only one table shows up with the information 2
Problem with dynamically adding event handlers in IE - setAttribute and attachEvent 5
How can I create a table using the input element? 1
Onclick and DOM problem 5
Javascript and Dynamic Table 2
Can someone tell me if this a real tracker? Or is it one designed to show you a different message at certain times, ie. acting like one? 0
DOM javascript working fine with IE but nothing happens with Firefox 6
Creating Table with Javascript abd Adding Events dynamically to each 0

Members online

Total: 75 (members: 2, guests: 73)
Robots: 366

Forum statistics

Threads
473,982
Messages
2,570,189
Members
46,734
Latest member
manin

Latest Threads

Top