Assign onclick event to a Cell

[joaotsetsemoita]

Hello everyone,

I'm having troubles assigning an onclick event to a cell. Im trying
something like

cursorPoint.cells[3].style.cursor = "hand";
cursorPoint.cells[3].width = "20";
cursorPoint.cells[3].onclick = "alert('this is a test');"
cursorPoint.cells[3].alt = "Select the columns";
cursorPoint.cells[3].innerHTML = " "

Everything is just working fine except the onclick. I also tried:

cursorPoint.cells[3].click = "alert('this is a test');" (without the
"on") but also didnt work.

Any help would be much appreciated

Thanks in advance

Joao

 

[Mister Joe]

Hello everyone,

I'm having troubles assigning an onclick event to a cell. Im trying
something like

cursorPoint.cells[3].style.cursor = "hand";
cursorPoint.cells[3].width = "20";
cursorPoint.cells[3].onclick = "alert('this is a test');"
cursorPoint.cells[3].alt = "Select the columns";
cursorPoint.cells[3].innerHTML = " "

Everything is just working fine except the onclick. I also tried:

cursorPoint.cells[3].click = "alert('this is a test');" (without the
"on") but also didnt work.

Any help would be much appreciated

Thanks in advance

Joao

Try this:

addEvent:function(obj, evtype, func){
try{
if(window.attachEvent){
obj.attachEvent("on"+evtype, func);
}
if(window.addEventListener){
obj.addEventListener(evtype, func,false);
}
}catch(e){
//alert the error if you want
}
}

obj will be the cell, evtype will be click and func will be whatever
function you want called when the event occurs. You also need to keep
in mind that the function will have the event for a parameter but from
the event you can find the source of the event. Let me know if this
does not work for you.

 

[joaotsetsemoita]

Hello everyone,

I'm having troubles assigning an onclick event to a cell. Im trying
something like

cursorPoint.cells[3].style.cursor = "hand";
cursorPoint.cells[3].width = "20";
cursorPoint.cells[3].onclick = "alert('this is a test');"
cursorPoint.cells[3].alt = "Select the columns";
cursorPoint.cells[3].innerHTML = " "

Everything is just working fine except the onclick. I also tried:

cursorPoint.cells[3].click = "alert('this is a test');" (without the
"on") but also didnt work.

Any help would be much appreciated

Thanks in advance

Joao

Try this:

addEvent:function(obj, evtype, func){
try{
if(window.attachEvent){
obj.attachEvent("on"+evtype, func);
}
if(window.addEventListener){
obj.addEventListener(evtype, func,false);
}
}catch(e){
//alert the error if you want
}
}

obj will be the cell, evtype will be click and func will be whatever
function you want called when the event occurs. You also need to keep
in mind that the function will have the event for a parameter but from
the event you can find the source of the event. Let me know if this
does not work for you.- Hide quoted text -

- Show quoted text -

Hi Joe,

thanks for your reply.

Where do i have to put that piece of code? Do I have to call that
function somewhere in my code? What do I have to change in my code?

Btw, I will have plenty of cells to assing onClick events and not only
one.

 

[ASM]

(e-mail address removed) a écrit :

Hello everyone,

I'm having troubles assigning an onclick event to a cell. Im trying
something like

cursorPoint.cells[3].style.cursor = "hand";
cursorPoint.cells[3].width = "20";

cursorPoint.cells[3].onclick = "alert('this is a test');"

cursorPoint.cells[3].onclick = function() { alert('this is a test'); };

cursorPoint.cells[3].alt = "Select the columns";
cursorPoint.cells[3].innerHTML = " "

Everything is just working fine except the onclick. I also tried:

take care that 'cursorPoint' is really what you try to reach
a TD with an ID
cursorPoint = document.getElementById('cursorPointTd');

 

[Mister Joe]

On May 9, 9:52 am, (e-mail address removed) wrote:

Hello everyone,
I'm having troubles assigning an onclick event to a cell. Im trying
something like
cursorPoint.cells[3].style.cursor = "hand";
cursorPoint.cells[3].width = "20";
cursorPoint.cells[3].onclick = "alert('this is a test');"
cursorPoint.cells[3].alt = "Select the columns";
cursorPoint.cells[3].innerHTML = " "
Everything is just working fine except the onclick. I also tried:
cursorPoint.cells[3].click = "alert('this is a test');" (without the
"on") but also didnt work.
Any help would be much appreciated
Thanks in advance
Joao

Try this:

addEvent:function(obj, evtype, func){
try{
if(window.attachEvent){
obj.attachEvent("on"+evtype, func);
}
if(window.addEventListener){
obj.addEventListener(evtype, func,false);
}
}catch(e){
//alert the error if you want
}
}

obj will be the cell, evtype will be click and func will be whatever
function you want called when the event occurs. You also need to keep
in mind that the function will have the event for a parameter but from
the event you can find the source of the event. Let me know if this
does not work for you.- Hide quoted text -

- Show quoted text -

Hi Joe,

thanks for your reply.

Where do i have to put that piece of code? Do I have to call that
function somewhere in my code? What do I have to change in my code?

Btw, I will have plenty of cells to assing onClick events and not only
one.

Start by doing the following:
var foo = {
addEvent:function(obj, evtype, func){
try{
if(window.attachEvent){
obj.attachEvent("on"+evtype, func);
}
if(window.addEventListener){
obj.addEventListener(evtype, func,false);
}
}catch(e){
//ncssmDOM.showError(e);
}
}
}
Several cells wont be a problem. You need to find the table and
iterate through the cells you want to have the event.

for each cell do the following
foo.addEvent(cell, "click", bar);

bar will be the name of the function that you will call. If you have
anymore trouble feel free to send me an email.

 

[joaotsetsemoita]

On May 9, 9:52 am, (e-mail address removed) wrote:
Hello everyone,
I'm having troubles assigning an onclick event to a cell. Im trying
something like
cursorPoint.cells[3].style.cursor = "hand";
cursorPoint.cells[3].width = "20";
cursorPoint.cells[3].onclick = "alert('this is a test');"
cursorPoint.cells[3].alt = "Select the columns";
cursorPoint.cells[3].innerHTML = " "
Everything is just working fine except the onclick. I also tried:
cursorPoint.cells[3].click = "alert('this is a test');" (without the
"on") but also didnt work.
Any help would be much appreciated
Thanks in advance
Joao
Try this:
addEvent:function(obj, evtype, func){
try{
if(window.attachEvent){
obj.attachEvent("on"+evtype, func);
}
if(window.addEventListener){
obj.addEventListener(evtype, func,false);
}
}catch(e){
//alert the error if you want
}
}
obj will be the cell, evtype will be click and func will be whatever
function you want called when the event occurs. You also need to keep
in mind that the function will have the event for a parameter but from
the event you can find the source of the event. Let me know if this
does not work for you.- Hide quoted text -
- Show quoted text -

Hi Joe,

thanks for your reply.

Where do i have to put that piece of code? Do I have to call that
function somewhere in my code? What do I have to change in my code?

Btw, I will have plenty of cells to assing onClick events and not only
one.

Start by doing the following:
var foo = {
addEvent:function(obj, evtype, func){
try{
if(window.attachEvent){
obj.attachEvent("on"+evtype, func);
}
if(window.addEventListener){
obj.addEventListener(evtype, func,false);
}
}catch(e){
//ncssmDOM.showError(e);
}
}}

Several cells wont be a problem. You need to find the table and
iterate through the cells you want to have the event.

for each cell do the following
foo.addEvent(cell, "click", bar);

bar will be the name of the function that you will call. If you have
anymore trouble feel free to send me an email.- Hide quoted text -

- Show quoted text -

Joe,

is just worked fine. Exactly what I need. Thanks you very much for
your help

btw ASM, thanks for you reply as well but didn't work. I'm sure the
cursorPoint has the correct id because all the other atributtes are
set correctly and I see it on the browser. Anyway I have my problem
solved. Thanks again.

 

[ASM]

(e-mail address removed) a écrit :

Where do i have to put that piece of code?

nowhere, it is too much complicated only for a simple 'onclick'

What do I have to change in my code?

cursorPoint.onclick = function() { alert('hello Jao c\'est pas moi'); };

Btw, I will have plenty of cells to assing onClick events and not only
one.

Argghhhh!


function setOnClick(myTable, index_of_column) {
var rangs = document.getElementById(myTable).rows ||
document.getElementById(myTable).tbody.rows;
for(var i=0; i<rangs.length; i++) {
var Cel = rangs.cells[index_of_column];
Cel.onclick = function() { alert('got :\n'+this.innerHTML); }
Cel.style.cursor = 'pointer';
Cel.style.backgroundColor = '#ffc';
Cel.onMouseover = function() {this.style.backgroundColor='yellow';};
Cel.onMouseout = function() { this.style.backgroundColor = ''; };
}
}


<p><button onclick="setOnClick('matable',2);">select col 3</button></p>
<table id="matable" border="1" width="90%" cellspacing="2"
cellpadding="2" align="center">
<tbody>
<tr>
<td>_Row_1_Cell_1_</td>
<td>_Row_1_Cell_2_</td>
<td>_Row_1_Cell_3_</td>
</tr>
<tr>
<td>_Row_2_Cell_1_</td>
<td>_Row_2_Cell_2_</td>
<td>_Row_2_Cell_3_</td>
</tr>
<tr>
<td>_Row_3_Cell_1_</td>
<td>_Row_3_Cell_2_</td>
<td>_Row_3_Cell_3_</td>
</tr>
</tbody></table>

 

[Richard Cornford]

Mister Joe wrote:

addEvent:function(obj, evtype, func){
try{
if(window.attachEvent){
obj.attachEvent("on"+evtype, func);
}
if(window.addEventListener){
obj.addEventListener(evtype, func,false);
}
}catch(e){
//alert the error if you want
}
}

Are you completely mad? Where is the impaled relationship between an
environment providing either of a global - attachEvent - method or a
global - addEventListener - method and the - obj - object passed to the
function (presumably a DOM Element) having those methods? What is wrong
a direct test on the properties of the - obj - object, doesn't that have
a precise one-to-one relationship with the object's support for those
methods?

And haven't you understood the role of the - else - keyword in program
flow control? If you encounter an environment that provides both -
attachEvent - and - addEventListener - (such as some Opera and
IceBrowser versions) you are going to attach the same listener twice,
and have it executed twice for each event. What sort of chaos will that
result in? But even if only - attachEvent - is available (as it is on
IE 5+, the most commonly used/encountered browser) why go on to test for
the existence of - window.addEventListener - when you have already found
and used the - attachEvent - method?

Richard.

 

[ASM]

(e-mail address removed) a écrit :

btw ASM, thanks for you reply as well but didn't work.

Huu?

It works !

<p><button
onclick="document.getElementById('goal').onclick=function(){alert('great');};">
do it</button>
</p>
<table border="1" width="90%" cellspacing="2">
<tr>
<td>_Row_1_Cell_1_</td>
<td id="goal">_Row_1_Cell_2_</td>
<td>_Row_1_Cell_3_</td>
</tr>
<tr>
<td>_Row_2_Cell_1_</td>
<td>_Row_2_Cell_2_</td>
<td>_Row_2_Cell_3_</td>
</tr>

I'm sure the
cursorPoint has the correct id because all the other atributtes are
set correctly and I see it on the browser.

on WHICH browser ? if it is IE you're sure of anything ! ! !

Anyway I have my problem solved.

Not really if we believe Richard ... :-(

 

[ASM]

ASM a écrit :

function setOnClick(myTable, index_of_column) {
var rangs = document.getElementById(myTable).rows ||
document.getElementById(myTable).tbody.rows;
for(var i=0; i<rangs.length; i++) {
var Cel = rangs.cells[index_of_column];
Cel.onclick = function() { alert('got :\n'+this.innerHTML); }
Cel.style.cursor = 'pointer';
Cel.style.backgroundColor = '#ffc';
Cel.onMouseover = function() {this.style.backgroundColor='yellow';};
Cel.onMouseout = function() { this.style.backgroundColor = ''; };

Cel.onmouseover = function() {this.style.backgroundColor='yellow'; };
Cel.onmouseout = function() { this.style.backgroundColor = '#ffc'; };

 

[joaotsetsemoita]

(e-mail address removed) a écrit :




Huu?

It works !

<p><button
onclick="document.getElementById('goal').onclick=function(){alert('great');­};">
do it</button>
</p>
<table border="1" width="90%" cellspacing="2">
<tr>
<td>_Row_1_Cell_1_</td>
<td id="goal">_Row_1_Cell_2_</td>
<td>_Row_1_Cell_3_</td>
</tr>
<tr>
<td>_Row_2_Cell_1_</td>
<td>_Row_2_Cell_2_</td>
<td>_Row_2_Cell_3_</td>
</tr>


on WHICH browser ? if it is IE you're sure of anything ! ! !


Not really if we believe Richard ... :-(

I just would like to have something like

cursorPoint.cells[3].onclick = "placeCursor()";

where place cursor is a function I have defined before. Isn't there a
simple way to do this??

btw, this is for a intranet where the browser has to be IE, so the
browser is not a problem.

Richard, what do you sugest?

 

[Richard Cornford]

(e-mail address removed) a écrit :

Not really if we believe Richard ... :-(

Don't worry, nobody ever believes me, until it is too late.

Richard.

 

[Richard Cornford]

Richard Cornford wrote:

Are you completely mad? Where is the impaled relationship

<snip> ^^^^^^^

Typo, should be "implied".

Richard.

 

[Richard Cornford]

On May 9, 4:52 pm, ASM wrote:

I just would like to have something like

cursorPoint.cells[3].onclick = "placeCursor()";

where place cursor is a function I have defined before. Isn't
there a simple way to do this??

btw, this is for a intranet where the browser has to be IE, so
the browser is not a problem.

Richard, what do you sugest?

You are not understanding the type of the value you are assigning. The
intrinsic event properties of DOM Elements (such as - onclick - and -
onmouseover -) are expecting to have values assigned to them that are
references to function objects. You are attempting to assign string
values (they are strings so they have quotes round them). What you are
no seeing is that when such a handler is created from an attribute in
the HTML source the browser uses the string value of the attribute to
create a function object and then it assigns a reference to that
function object to the intrinsic event handler of the DOM Element. If
you use javascript to make the assignment the browser will do no sting
value to function object translation, and so it is your job to create
the function object and assign a reference to it to the intrinsic event
property.

Anyway, you have a function object that is referred to by the
Identifier - placeCursor -, and it does no look like that function is
expecting any arguments, so you just need to assign the value of the -
placeCursor - variable (which is a reference to a function object) to
the - onclick - property of the object (making it into a reference to
the same function object). Simple, reliable, fast, easy and cheep:-

cursorPoint.cells[3].onclick = placeCursor;

(when the - placeCursor - is executed in response to onclick events
the - this - keyword inside the function will be a reference to the DOM
Element to which it has been attached (the TD), and browsers following
the Netscape event handling style will pass an - event - object as the
first argument to the function call.)

Richard.

 

[ASM]

(e-mail address removed) a écrit :

I just would like to have something like

cursorPoint.cells[3].onclick = "placeCursor()";

alors c'est :

cursorPoint.cells[3].onclick = placeCursor;

or :

cursorPoint.cells[3].onclick = function() { placeCursor(); };

or (but not too good with IE) :

cursorPoint.cells[3].setAttribute('onclick','placeCursor()');



hope this time 'cursorPoint' is the right row you want to reach.

 

[Mister Joe]

Mister Joe wrote:



Are you completely mad? Where is the impaled relationship between an
environment providing either of a global - attachEvent - method or a
global - addEventListener - method and the - obj - object passed to the
function (presumably a DOM Element) having those methods? What is wrong
a direct test on the properties of the - obj - object, doesn't that have
a precise one-to-one relationship with the object's support for those
methods?

And haven't you understood the role of the - else - keyword in program
flow control? If you encounter an environment that provides both -
attachEvent - and - addEventListener - (such as some Opera and
IceBrowser versions) you are going to attach the same listener twice,
and have it executed twice for each event. What sort of chaos will that
result in? But even if only - attachEvent - is available (as it is on
IE 5+, the most commonly used/encountered browser) why go on to test for
the existence of - window.addEventListener - when you have already found
and used the - attachEvent - method?

Richard.

While your comment about using an if-else if statement is well taken I
have not had any problem w/ events firing twice. I've been using this
function to attach events for over 5 months and have not had any
problems across platforms or across browsers.

 

[Richard Cornford]

While your comment about using an if-else if statement is well
taken I have not had any problem w/ events firing twice. I've
been using this function to attach events for over 5 months and
have not had any problems across platforms or across browsers.

If inept, inadequate or inefficient testing does not reveal faults in
inherently poor code then there is a fault in the approach to testing.
There is no question that your code will do exactly what you programmed
it to do (and I described above). If you have not seen undesirable
consequences that will be because you have not been looking.

Richard.

 

[Mister Joe]

If inept, inadequate or inefficient testing does not reveal faults in
inherently poor code then there is a fault in the approach to testing.
There is no question that your code will do exactly what you programmed
it to do (and I described above). If you have not seen undesirable
consequences that will be because you have not been looking.

Richard.

Richard,
I'm fully capable of admitting when I am wrong and I even thank you
for pointing out that I should use an if -else if but as I said there
are no problems or undesirable consequences in the execution of
scripts using the function. The following:
<div id = "test">Hello</div>

function foo(ev) {
alert("in foo");
}
var t1 = {
addEvent:function(obj, evtype, func){
try{
if(window.attachEvent){
obj.attachEvent("on"+evtype, func);
}
if(window.addEventListener){
obj.addEventListener(evtype, func,false);
}
}catch(e){
ncssmDOM.showError(e);
}
}
};
var a = document.getElementById("test");
t1.addEvent(a, "click", foo);

does result in the event firing twice. I have tried in IE 6 & 7 as
well as the latest versions of Opera and Firefox. Richard if you know
of a browser and can write a script using the function that will
result in the event being fired twice I would like to see the code.
I'm not trying to be rude and I value the explanations that you give
in response to questions, but please provide counter examples when
questioning the execution of code. As I said this has worked for me
and seemed to work for the original poster when he tried. It is
possible that I am wrong and that there is a problem w/ my code but in
my testing (which I believe has been thourough especially since the
function is used extensively to attach events) I have not encountered
any evidence that would support your claim.

 

[-Lost]

Richard,
I'm fully capable of admitting when I am wrong and I even thank you
for pointing out that I should use an if -else if but as I said there
are no problems or undesirable consequences in the execution of
scripts using the function. The following:
<div id = "test">Hello</div>

function foo(ev) {
alert("in foo");
}
var t1 = {
addEvent:function(obj, evtype, func){
try{
if(window.attachEvent){
obj.attachEvent("on"+evtype, func);
}
if(window.addEventListener){
obj.addEventListener(evtype, func,false);
}
}catch(e){
ncssmDOM.showError(e);
}
}
};
var a = document.getElementById("test");
t1.addEvent(a, "click", foo);

does result in the event firing twice. I have tried in IE 6 & 7 as
well as the latest versions of Opera and Firefox. Richard if you know
of a browser and can write a script using the function that will
result in the event being fired twice I would like to see the code.
I'm not trying to be rude and I value the explanations that you give
in response to questions, but please provide counter examples when
questioning the execution of code. As I said this has worked for me
and seemed to work for the original poster when he tried. It is
possible that I am wrong and that there is a problem w/ my code but in
my testing (which I believe has been thourough especially since the
function is used extensively to attach events) I have not encountered
any evidence that would support your claim.

If I may, I believe what Richard initially told you is all that is
relevant at this point.

Chaotic behavior and insufficient testing. He specifically pointed out
that some versions of Opera and Ice Browser support both methods, and
therefore would fire true, twice (once for each if).

You could therefore embed one of the statements in another try-catch,
but that would be pointless too.

Feature detect without a try-catch.