changing onclick attribute dynamically,

GBS · May 4, 2006

Hi all,,

I had a real problem since few days,, about changing mouse attributes dynamically, using javascript,
To explain, using a line of code like:
[code]
document.getElementById('test').setAttribute("onclick","testfunction()";);
[/code]
just worked fine using Firefox & Opera, but it didn't worked using IE...

Trying to understand & solve the problem, I've put in a debug window the onclick attribute content, & result under IE was looking like:
[!--quoteo--][div class=\'quotetop\']QUOTE[/div][div class=\'quotemain\'][!--quotec--]
function anonymous()
{
ChangeAttribute(this);
}
[/quote]
& under FF or Opera, it was just like:
[!--quoteo--][div class=\'quotetop\']QUOTE[/div][div class=\'quotemain\'][!--quotec--]
ChangeAttribute(this);
[/quote]
So, the problem was about the onclick format function,, which is under IE: function anonymous() {.......}

Finally, to dynamically change the onclick attribute, I've used that script which detects if the browser has the keyword 'function' in the onclick attribute or not,, & changes in the correct format the attribute,
[code]
<html>
<head>
<title>changing mouse attributes,</title>
</head>
<body>

<script>
function filterLineBreaks (str) {
str = str.replace(/\r\n|\r|\n/g, ' ');
return str;
}

function ChangeAttribute(node)
{
// using:
// var str=document.getElementById('debug').getAttribute("onclick");
// makes a bug with IE, because of the line breaks,
// so, we get the onclick attribute using the window debug value

var str=document.getElementById('debug').value;
result = filterLineBreaks(str);

//searching for the keyword 'function' in the onclick attribute
result = str.search("function");

if (result!=-1) // the keyword 'function' has been found in the onclick attribute, meaning 'the browser is like IE'
    {
    //works with IE, but not with Opera or FF:
    var func="function anonymous() {AttributChanged(this);}";
    eval("node.setAttribute(\"onclick\","+func+")");

    // BTW, that one didn't work,, don't know why,... :
    // node.setAttribute("onclick","function anonymous() {AttributChanged(this);}");
    }
else
    {
    //works with FF & Opera but not with IE !
    node.setAttribute("onclick","AttributChanged(this);");
    }
alert('nice shot,,... now we try to change the onclick attribute,,');

//works for all
node.value="value changed,... click again to test,,";

//debuging the new onclick attribute
debug();
}

function AttributChanged(node)
{
alert('well done,, test finished! :)');
node.value="success!";
debug();
}

function debug()
{
document.getElementById('debug').value=document.getElementById('testing').getAttribute("onclick");
}
</script>

<input type="button" id="testing" onclick="ChangeAttribute(this);" value="testing,.... click on me,,">
<br>
<textarea id="debug" cols="100" rows="10"></textarea>

<script>
// debug the current onclick attribute on bodyload
debug();
</script>

</body>
</html>
[/code]
I know,,... I could have done this by:
-detect user agent
-change the onclick attribute depending of the agent,
But I wanted to know also how to remove the break lines in a texarea value,... :)

Hoping it will help some,

l8tr,,

eemerge · June 2, 2006

just helped one :)
had some trouble fixing this on IE/Firefox, to make it work on both of them....of course, the initial code worked fine in FIrefox and Opera...IE sucked as usual...

Thanks for the tips...saved me a lot of 'researching' :)

Sign In

changing onclick attribute dynamically,

Recommended Posts

GBS

Link to comment

Share on other sites

eemerge

Link to comment

Share on other sites

Archived

Browse

Activity

Important Information