Jump to content

changing onclick attribute dynamically,


GBS

Recommended Posts

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,,
Link to comment
Share on other sites

  • 4 weeks later...
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' :)
Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.