/    Sign up×
Community /Pin to ProfileBookmark

function assigned to div element

Copy linkTweet thisAlerts:
Nov 16.2004

hi!

I still have some difficulty in using div elements created dynamically.

I created a DIV using

[b]
dd = document.createElement(“DIV”);
dd.style.position=”absolute”;
[/b]
now when i give
[b]
dd.onclick=functionName;
[/b]

The function is invoked in mozilla but not in IE6.

Please help me!

to post a comment
JavaScript

8 Comments(s) ↴

Copy linkTweet thisAlerts:
@7studNov 16.2004 — Try this:
<i>
</i>window.onload=function()
{
var dd = document.createElement("DIV");

<i> </i>dd.style.position="absolute";
<i> </i>dd.style.left="100px";
<i> </i>dd.style.top="100px";
<i> </i>dd.style.cursor="pointer";

<i> </i>function f()
<i> </i>{
<i> </i> alert("hello world");
<i> </i>}

<i> </i>[color="red"]dd.setAttribute("onclick", f);[/color]

<i> </i>var textNode=document.createTextNode("click me");
<i> </i>dd.appendChild(textNode);
<i> </i>document.getElementsByTagName("body").item(0).appendChild(dd);
};
Copy linkTweet thisAlerts:
@KorNov 16.2004 — You probably forgot to append the element [b]before[/b] firing the event

[color=red]var[/color] dd = document.createElement("DIV");

[color=red][i]root[/i].appendChild(dd);[/color]

dd.style.position="absolute";

dd.onclick=functionName;

Ex:
[code=php]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script language="JavaScript" type="text/JavaScript">
function bla(){
var oDiv=document.createElement('div');
document.getElementById('blabla').appendChild(oDiv);
oDiv.style.width=100;
oDiv.style.height=100;
oDiv.style.backgroundColor='#CCCCCC';
oDiv.onclick=function(){alert('You clicked me!')}
}
onload=bla
</script>
</head>
<body>
<div id="blabla"></div>
</body>
</html>
[/code]
Copy linkTweet thisAlerts:
@KorNov 16.2004 — 
dd.setAttribute("onclick", f);
[/quote]

This should not work, as onclick is an [b]event[/b] not an [b]attribute[/b]
Copy linkTweet thisAlerts:
@7studNov 16.2004 — This should not work, as onclick is an event not an attribute[/quote]
Ack! You're right. :o It works in IE6, but that doesn't count. Do this instead:
<i>
</i>window.onload=function()
{
var dd = document.createElement("DIV");

<i> </i>dd.style.position="absolute";
<i> </i>dd.style.left="100px";
<i> </i>dd.style.top="100px";
<i> </i>dd.style.cursor="pointer";

<i> </i>function f()
<i> </i>{
<i> </i> alert("hello world");
<i> </i>}

<i> </i>[color="red"]dd.onclick=f;[/color]

<i> </i>var textNode=document.createTextNode("click me");
<i> </i>dd.appendChild(textNode);
<i> </i>document.getElementsByTagName("body").item(0).appendChild(dd);
};
Copy linkTweet thisAlerts:
@KorNov 16.2004 — well, yes, it looks like the event handler can be fired even before the appending. That means drahul must have done another mistake, probably he did not append the element al all...

?
Copy linkTweet thisAlerts:
@drahulauthorNov 16.2004 — dd.onclick=functionName; does work in my standalone modal.

But after integrating it with my project it does't work anymore in IE6.

is there any possibility that this event is canceled by some other event...
Copy linkTweet thisAlerts:
@KorNov 16.2004 — [i]Originally posted by drahul [/i]

[B]dd.onclick=functionName; does work in my standalone modal.

But after integrating it with my project it does't work anymore in IE6.



is there any possibility that this event is canceled by some other event... [/B][/QUOTE]

How should we know, unless you shouw us your code? ? But I'd rather suspect that you have defined another global variable somewhere with the same name. Try using local variable whenever you don't need it to be a global by all means.
Copy linkTweet thisAlerts:
@7studNov 16.2004 — is there any possibility that this event is canceled by some other event...[/quote]
Yep. If you do this:

dd.onclick=functionName;

dd.onclick=someFunc;

The sencond function overwrites the first function. If you have a big complicated script, it is probably best to add event handlers doing something like this:

var previous_func = dd.onclick;
dd.onclick = function()
{
if(previous_func) previous_func();
someFunc();
};
×

Success!

Help @drahul spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...