By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
434,870 Members | 2,400 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 434,870 IT Pros & Developers. It's quick & easy.

Dynamically adding javascrip with javascript

P: n/a
Is it possible to use javascript to add javascript to a DOM object?
I've the following code to add an image to a page:

function flagError(id){
var image = document.createElement('img');
image.alt = "error";
image.src = "./resources/errorNew.gif";
var uncle = getUncle(id);
if(!first_child(uncle)){
uncle.appendChild(image);
}
}

what I want to do is use wz_tooltip to add a nice tooltip to the image.
The end result would be something like this:

<img src="./resources/errorNew.gif" alt="error" onmouseover="return
escape('Repition.');"/>

I've looked at doing it via:

image.onmouseover = "\"return escape('Repition.');\"";

but that doesn't seem to work at all... any ideas anyone?

Cheers,

Dom

Jan 17 '06 #1
Share this Question
Share on Google+
7 Replies


P: n/a
an***********@gmail.com said the following on 1/17/2006 9:58 AM:
Is it possible to use javascript to add javascript to a DOM object?
I've the following code to add an image to a page:

function flagError(id){
var image = document.createElement('img');
image.alt = "error";
image.src = "./resources/errorNew.gif";
var uncle = getUncle(id);
if(!first_child(uncle)){
uncle.appendChild(image);
}
}

what I want to do is use wz_tooltip to add a nice tooltip to the image.
The end result would be something like this:

<img src="./resources/errorNew.gif" alt="error" onmouseover="return
escape('Repition.');"/>

I've looked at doing it via:

image.onmouseover = "\"return escape('Repition.');\"";


image would be my last choice of a variable name for an image.

imageRef.onmouseover = function(){
return escape('Repition.')
}

--
Randy
comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/
Jan 17 '06 #2

P: n/a
> I've looked at doing it via:
image.onmouseover = "\"return escape('Repition.');\"";


Try this instead:

image.onmouseover = new Function("return escape('Repition')");

Jan 17 '06 #3

P: n/a
Ronaldo Junior said the following on 1/17/2006 11:50 AM:
I've looked at doing it via:
image.onmouseover = "\"return escape('Repition.');\"";

Try this instead:

image.onmouseover = new Function("return escape('Repition')");


I actually just learned that whether you use function() or new Function
in that position depends on what scope you want it to have.

--
Randy
comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/
Jan 17 '06 #4

P: n/a
> I actually just learned that whether you use function() or new Function
in that position depends on what scope you want it to have.


Would you care to explain? :)

Jan 17 '06 #5

P: n/a
an***********@gmail.com wrote:
Is it possible to use javascript to add javascript to a DOM object?
In a sense, yes.
[...]
The end result would be something like this:

<img src="./resources/errorNew.gif" alt="error" onmouseover="return
escape('Repition.');"/>

I've looked at doing it via:

image.onmouseover = "\"return escape('Repition.');\"";

but that doesn't seem to work at all... any ideas anyone?


If you use

<img src="resources/errorNew.gif" alt="error"
onmouseover="return escape('Repition.');"
id="foo"/>

then (supported by UAs conforming to W3C-DOM Level 2 Events here, so not IE)

document.images['foo'].addEventListener(
'mouseover',
function()
{
return escape('Repition.');
},
false);

or (supported by all widely distributed Web browsers, including IE)

document.images['foo'].onmouseover = function()
{
return escape('Repition.');
}

or (IE-only)

document.images['foo'].attachEvent(
'onmouseover',
function()
{
return escape('Repition.');
});

will add an event listener (or overwrite the previous one on assignment)
to the element represented by the respective DOM element object.

[However, there is no need for escape() in either example.]

RTFM and do some research on previous discussions before you post;
this is a _news_group.

<URL:http://jibbering.com/faq/>
PointedEars
Jan 17 '06 #6

P: n/a
"Ronaldo Junior" <se******@gmail.com> writes:
I actually just learned that whether you use function() or new Function
in that position depends on what scope you want it to have.


Would you care to explain? :)


When you write
function () { return foo; }
the "foo" variable refers to the closest enclosing declaration of
a variable called foo. So, inside another function, e.g., :

function setHandler(elem, foo) {
elem.onclick = function(){ alert(foo); };
}

the inner "foo" refers to the local variable created by the outer
function argument. I.e., it works to write:
setHandler(document.body, "YOU TOUCHED THE BODY");

When you create a function using the Function method (used as a
constructor or not), the body of the function will not see surrounding
variables, but only the global scope (and parameters of the created
function ofcourse). So, if you do:

var foo = "GOTCHA!";
function setHandler2(elem, foo) {
elem.onclick = new Function("alert(foo);");
}

then calling
setHandler2(document.body, "YOU TOUCHED THE BODY");
and clicking the document body will alert "GOTCHA!", not the intended
message.

/L
--
Lasse Reichstein Nielsen - lr*@hotpop.com
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
'Faith without judgement merely degrades the spirit divine.'
Jan 18 '06 #7

P: n/a
Sorry Thomas, I checked the FAQ and searched previous posts before
posting but I guess my google skills - or ability to grok the answers -
aren't as top-hole as yours. Thank you all for the help.
Cheers, Dom

Jan 18 '06 #8

This discussion thread is closed

Replies have been disabled for this discussion.