Changing onClick code with JavaScript

[smulliki]

Hi,

I have a table with a series of buttons down the left side. These buttons have an onClick handler that selects items and adds them to that line in the table. I am trying to change the function of the button so that it edits the line of data after it has been used to add the line of data.

linebutton=getElementByID('btn1');
linebutton.value='Edit'; // i.e. change the button label (this works)
linebutton.setAttribute("onclick","openpopup('edititem.php?line='"+lineno+"',400,200,'',0,0,0,0,0);" );
// This succeeds in changing the
// the code stored in the onclick
// attribute, but it will not execute

When I click on the button (now labeled 'Edit'), nothing happens. I suspect the event handler must be re-activated somehow, but I can't seem to figure it out. Would someone please give me some guidance?

Thanks.

Steve

[deadseasquirrel]

I'll try to help. Much like how setAttribute("class",...) doesn't work and why you need to do setAttribute("className",...) to work, with IE setAttribute("onclick"...) does not work it has to be [element].onClick = [function] and remember when you put the function name in there leave the parentheses out. So your code will look something like

node1.onClick = toggle;

[deadseasquirrel]

And actually let me make another a caveat you can also do it like this:

foo.attachEvent('onclick',functionName);

I got that from another website while I was learning

[Kor]

attachEvent is an IE only method... so that I guess that the best crossbrowser solution is

object.onclick=function(){
...code lines...
}

In your case:
inebutton.onclick=function(){
openpopup('edititem.php?line='"+lineno+"',400,200,'',0,0,0,0,0);
}

...on the other hand you must know that event handlers are not HTML attributes, so that you may not change them using setAttribute() method.

[deadseasquirrel]

KOR, how did you find out that onClick is not an HTML attribute (I mean other than the fact that you can't use setAttribute). If I had read that somewhere about what is an HTML attribute and what isn't I think I would have saved myself a lot of grief, and smulliki as well. Is there more literature about what is an HTML attribute and what isn't, and what those other "seeming" HTML attributes are in fact? Thanks.

[Kor]

onclick, as well as the other event handlers are javascript addons. So that they are not HTML attributes. They have no values, they fire some javascript functions or they write some javascript code lines...

Same with CSS pointers style and class. They are CSS addons, thus they are not HTML attributes. To manipulate them on the fly you have to use
object.style
object.className
and not settAttribute() method

[glenngv]

Event handlers are both HTML attribute and event handler at the same time. The difference is that HTML attributes are parsed by HTML parser while handlers by Javascript parser. Event handlers are not strings but Javascript statement or expression.

http://www.codingforums.com/showthre...364#post232758

[adamskii]

Originally Posted by Kor

object.onclick=function(){
...code lines...
}

In your case:
inebutton.onclick=function(){
openpopup('edititem.php?line='"+lineno+"',400,200,'',0,0,0,0,0);
}

Hi, Im having a similar problem, where I cant get the onclick to change dynamically. Heres my code:

var next=document.getElementById('nextPhoto');
next.href='album.asp?PhotoID='+arrPhoto[i+1][0];
next.onClick=function(){displayPic(arrPhoto[i+1][0]);};

It changes the href value no problem, just not the onClick.

Any help greatly appreciated...

[adamskii]

ok, so its been a long morning.

After (another) review of the code I noticed my fatal mistake; onClick instead of onclick!

Arrrrrrgh....................