setAttribute and onclick

[p3x]

Hi,

I need to set an onclick attribute to a <a> tag. This attribute will have a value of: showText(id) where id is a variable.

I tried:

aTag.setAttribute('onclick', 'showText(id)');

But that doesn't evaluate the variable 'id'. How could I fix this and why doesn't this work?

thanks in advance

[Kor]

a handler is not an attribute, use this

object.onclick=function(){showText(id)}

[brandonH]

I am trying to acomplish the same thing.
Kor, I have tried it that way as well, but it does not work for me.

it will set what you want to the onclick. but it will not execute what you put in it after that....

I have tried fooling around with object.outerHTML. and that seems to be the only way I can get it to set it and execute it.

but I cant do this:

<input type=button value=first onclick="alert('first');" id=bt1>
<input type=button value=change onclick="doit();">

<script language=javascript>
function doit(){
document.getElementById('bt1').value="second";
document.getElementById('bt1').onclick="window.location='http://www.yahoo.com';}";
var OUThtml=document.getElementById('bt1').outerHTML;
document.getElementById('bt1').outerHTML=OUThtml;
}
</script>

the above is supposed to set the onclick to the new value, and then grab the outerHTML of the object and reset it. but it doesnt work.

the only way I have been able to get it to work is to hard code the outerHTML like so:

document.getElementById('bt1').outerHTML="<input type=button value=first onclick=\"alert(\'second\');\" id=bt1>"


if anyone knows either whats I'm doing wrong, or what I should do, please let me know.

[Kor]

You have missed the point. I repeat

object.onclick=function(){
... statements or call some function here...
}

[brandonH]

I've tried that as well, and it wont work for me.....

I didnt do it in the above code snippet because it didnt matter what I showed cuz neither one worked.

[Kor]

What is that id you want to send as parameter in function showText(id)?

[tobyhs]

pl see below

[tobyhs]

Hi Kor, following this ancient discussion about setting .onclick events runtime and having problems with resetting row indexes in a function for a dynamic table.

New to this game so not yet sure how the assignment works but this actually sets the function call for all table rows to the last index value in the iteration where I would have expected it to increment the i value for each row in the loop.

function fnReIDRows(sTable) {
//other .setAttribtes for rows omitted here...
var cRows = document.getElementById(sTable).tBodies[0].rows;
for (var i=0; i<cRows.length; i++) {
cRows[i].onclick=function(){fnSetActiveRow(i)}; //function sets on last i index for all rows
}
}

Being used to the luxury of VB controls, I'm probably expecting this to simpler than it is!

[Kor]

That is obvious, as the interpreter will first run the loop than afterward sets the attributes.
There are several ways to bypass the problem. One of them is to create a custom property, let's say ind (you can choose whichever name you want, but avoid javascript native properties and reserved words) in order to "stick" the index. By short, a closure.

for (var i=0; i<cRows.length; i++) {
cRows[i].ind=i;//create a custom property and assign the index as its value
cRows[i].onclick=function(){fnSetActiveRow(this.ind)};
}


That is a generic solve. In the particular case of rows, you may use straight the rowIndex native property in a similar closure.

for (var i=0; i<cRows.length; i++) {
cRows[i].onclick=function(){fnSetActiveRow(this.rowIndex)};
}