add an onclick event

[WindAndWaves]

Hi Gurus

I have the following code:

function CI(ImgN, Alt){

if( document.getEle mentById && document.getEle mentById('il') ){

var d=document.getE lementById('il' );

if(document.cre ateElement){

var i=document.crea teElement('img' );

i.src="i/" + ImgN;

i.className='l' ;

i.alt=Alt;

while(d.firstCh ild!==null){

d.removeChild(d .firstChild);

}

d.appendChild(i );

return false;

}else if(d.innerHTML) {

d.innerHTML='<i mg src="i/' + ImgN + '" class="l" alt="' + Alt + '"
ONCLICK="return XI()">';

return false;

}else {

return true;}

} else {

return true;}

}



I now want to add the onclick event to the img (so that the user can close
it), how do I do that, or can I simply add a bit of text at the bottom of
the image 'close image' (and how do I do that??)?



TIA



- Nicolaas

[Michael Winter]

Re: add an onclick event

On Wed, 17 Nov 2004 23:16:41 +1300, WindAndWaves <access@ngaru.c om> wrote:
[color=blue]
> I have the following code:[/color]

Could you please indent code when you post it. It's difficult to read,
otherwise. I have some comments for it, though.

The first such comment is that your return values are backwards. I assume
that you're returning false upon success because you want to cancel an
event. In my opinion, the function should concern only itself - if, at a
higher level, you need the opposite result, use the NOT logical operator
(!) once the function has returned.
[color=blue]
> function CI(ImgN, Alt){
> if(document.get ElementById && document.getEle mentById('il')) {
> var d=document.getE lementById('il' );[/color]

This is rather inefficient. The first thing to do would be make a call to
gEBI reliable. At a simple level, that's:

if(!document.ge tElementById) {
document.getEle mentById = function() {return null;};
}

Emulation using document.all can be found in the FAQ notes[1], and in
posts from me in the past.

You could then change the first two lines to:

var d = document.getEle mentById('il');
if(d) {
[color=blue]
> if(document.cre ateElement) {[/color]

if(document.cre ateElement && d.appendChild && d.removeChild) {
[color=blue]
> var i=document.crea teElement('img' );
> i.src="i/" + ImgN;
> i.className='l' ;
> i.alt=Alt;
>
> while(d.firstCh ild!==null){[/color]

A strict comparison isn't necessary, and could be harmful - if
d.firstChild is undefined, the contents of the loop will be executed. The
standard inequality operator (!=) will avoid that.
[color=blue]
> d.removeChild(d .firstChild);
> }
> d.appendChild(i );
> return false;
> } else if(d.innerHTML) {[/color]

This isn't a sufficient test. Even if d.innerHTML was a string

} else if('string' == typeof d.innerHTML) {

there's no guarantee that writing to it will have any effect. The FAQ
notes[1] show a proper test.
[color=blue]
> d.innerHTML='<i mg src="i/' + ImgN + '" class="l" alt="'
> + Alt + '" ONCLICK="return XI()">';
> return false;
> } else {
> return true;
> }
> } else {
> return true;
> }
> }[/color]

The final improvement would be to have the function alter itself to
execute only one path, once support has been proven. However, that's
probably excessive.
[color=blue]
> I now want to add the onclick event to the img (so that the user can
> close it),[/color]

The innerHTML path seems to accomplish that. To accomplish the same for
the DOM path, add

i.onclick = function() {return XI();};

[snip]

Hope that helps,
Mike


[1] Notes: <URL:http://www.jibbering.c om/faq/faq_notes/faq_notes.html>

--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail.

[RobG]

Re: add an onclick event

Michael Winter wrote:
[...]
[color=blue][color=green]
>> function CI(ImgN, Alt){[/color][/color]

[...]
[color=blue][color=green]
>> + Alt + '" ONCLICK="return XI()">';[/color][/color]

[...]
[color=blue]
> i.onclick = function() {return XI();};[/color]

If the intention is to add the CI() function to the replacement image,
should this line be:

i.onclick = function() {return CI();};

or is XI() defined somewhere else?

Cheers, Rob

[Michael Winter]

Re: add an onclick event

On Wed, 17 Nov 2004 21:39:50 +1000, RobG <rgqld@iinet.ne t.auau> wrote:
[color=blue]
> Michael Winter wrote:[/color]

[snip]
[color=blue][color=green]
>> i.onclick = function() {return XI();};[/color]
>
> If the intention is to add the CI() function to the replacement
> image, should this line be:
>
> i.onclick = function() {return CI();};
>
> or is XI() defined somewhere else?[/color]

My interpretation was that CI was called by clicking something, and it
adds an image to the document. The OP also wants a way to remove that
image: XI. A way to call XI is provided through the innerHTML path, but
not the DOM path.

I could be wrong. We'll just have to wait and see.

Mike

--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail.

[WindAndWaves]

Re: add an onclick event


"Michael Winter" <M.Winter@bluey onder.co.invali d> wrote in message
news:opshlxyqqr x13kvk@atlantis ...[color=blue]
> On Wed, 17 Nov 2004 21:39:50 +1000, RobG <rgqld@iinet.ne t.auau> wrote:
>[color=green]
> > Michael Winter wrote:[/color]
>
> [snip]
>[color=green][color=darkred]
> >> i.onclick = function() {return XI();};[/color]
> >
> > If the intention is to add the CI() function to the replacement
> > image, should this line be:
> >
> > i.onclick = function() {return CI();};
> >
> > or is XI() defined somewhere else?[/color]
>
> My interpretation was that CI was called by clicking something, and it
> adds an image to the document. The OP also wants a way to remove that
> image: XI. A way to call XI is provided through the innerHTML path, but
> not the DOM path.
>
> I could be wrong. We'll just have to wait and see.
>
> Mike
>
> --
> Michael Winter
> Replace ".invalid" with ".uk" to reply by e-mail.[/color]


Thank you both your help. It is looking great so far.

[SimonFx]

Re: add an onclick event

Nic, would this have worked for you?

- SimonFx

===

<HTML>
<HEAD>
<TITLE></TITLE>
<SCRIPT TYPE="text/javascript">
if(!document.ge tElementById) {document.getEl ementById = document.all ?
function(i) {return document.all[i];} : function() {return null;};}

function clearDIV (myDiv){
var obj = document.getEle mentById(myDiv) ;
obj.innerHTML = '';
obj.style.displ ay = 'none';
}

function blatIMG(myImage , myDiv){
var obj = document.getEle mentById(myDiv) ;
obj.innerHTML = '<IMG SRC="'+myImage+ '">';
obj.style.displ ay = '';
}

</SCRIPT>
</HEAD>
<BODY>

<a href="#" onClick="blatIM G('test01.jpg', 'myPic')">01</a>
<a href="#" onClick="blatIM G('test02.jpg', 'myPic')">02</a>
<a href="#" onClick="blatIM G('test03.jpg', 'myPic')">03</a>
<DIV ID="myPic" onClick="clearD IV('myPic')" STYLE="display: none"></DIV>
Blah
</BODY>
</HTML>

[SimonFx]

Re: add an onclick event

Ahem, maybe this would be better - works without Javascript.

===

<HTML>
<HEAD>
<TITLE></TITLE>
<SCRIPT TYPE="text/javascript">
if(!document.ge tElementById) {document.getEl ementById = document.all ?
function(i) {return document.all[i];} : function() {return null;};}

function clearDIV (myDiv){
var obj = document.getEle mentById(myDiv) ;
obj.innerHTML = '';
obj.style.displ ay = 'none';
}

function blatIMG(myImage , myDiv){
var obj = document.getEle mentById(myDiv) ;
obj.innerHTML = '<IMG SRC="'+myImage+ '">';
obj.style.displ ay = '';
return false;
}

</SCRIPT>
</HEAD>
<BODY>

<a href="test01.jp g" onClick="return blatIMG('test01 .jpg','myPic')" >01</a>
<a href="test02.jp g" onClick="return blatIMG('test02 .jpg','myPic')" >02</a>
<a href="test03.jp g" onClick="return blatIMG('test03 .jpg','myPic')" >03</a>
<DIV ID="myPic" onClick="clearD IV('myPic')" STYLE="display: none"></DIV>
Blah
</BODY>
</HTML>

[Rob B]

Re: add an onclick event


[color=blue]
> Michael Winter wrote:[/color]
[color=blue]
> while(d.firstCh ild!==null){[/color]

A strict comparison isn't necessary, and could be harmful - if
d.firstChild is undefined, the contents of the loop will be executed.
The
standard inequality operator (!=) will avoid that.
[color=blue]
> d.removeChild(d .firstChild);
> }[/color]

Wouldn't this:

while (d.hasChildNode s())
d.removeChild(d .lastChild);

....be more utilitarian?

*** Sent via Developersdex http://www.developersdex.com ***
Don't just participate in USENET...get rewarded for it!

[Michael Winter]

Re: add an onclick event

On 23 Nov 2004 16:45:19 GMT, Rob B <ferndoc9@hotma il.com> wrote:

Are you misquoting me, or is it Developersdex?
[color=blue]
> Michael Winter wrote:
>[color=green]
>> On Wed, 17 Nov 2004 23:16:41 +1300, WindAndWaves <access@ngaru.c om>
>> wrote:
>>[color=darkred]
>>> while(d.firstCh ild!==null){[/color]
>>
>> A strict comparison isn't necessary, and could be harmful - if
>> d.firstChild is undefined, the contents of the loop will be executed.
>> The standard inequality operator (!=) will avoid that.
>>[color=darkred]
>>> d.removeChild(d .firstChild);
>>> }[/color][/color]
>
> Wouldn't this:
>
> while (d.hasChildNode s())
> d.removeChild(d .lastChild);
>
> ...be more utilitarian?[/color]

Yes, that would do, too. :)

I don't know why I didn't suggest that; I did it recently.

while(d.firstCh ild) {/* ... */}

would have been better than a comparison, too.

Mike

--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail.

[Rob B]

Re: add an onclick event



Thanks. Don't think it was me, but you never know. New to these groups
(more au courant w/vBulletin) so struggling with the local customs.
Appreciate all your detailed responses. ;)

*** Sent via Developersdex http://www.developersdex.com ***
Don't just participate in USENET...get rewarded for it!

[Dr John Stockton]

Re: add an onclick event

JRS: In article <41a3e7ac$0$144 59$c397aba@news .newsgroups.ws> , dated
Wed, 24 Nov 2004 01:45:16, seen in news:comp.lang. javascript, Rob B
<ferndoc9@hotma il.com> posted :[color=blue]
>
>Thanks. Don't think it was me, but you never know. New to these groups
>(more au courant w/vBulletin) so struggling with the local customs.[/color]

Study the frequently-posted newsgroup FAQ - the appropriate part should
appear today - and relevant links therein, and your problems will reduce
to those of implementation via the peculiar "service" you use.

Install, if possible, properly-designed newsreader software, and
implementation will then present no difficulty.

--
© John Stockton, Surrey, UK. ?@merlyn.demon. co.uk Turnpike v4.00 IE 4 ©
<URL:http://www.jibbering.c om/faq/> JL/RC: FAQ of news:comp.lang. javascript
<URL:http://www.merlyn.demo n.co.uk/js-index.htm> jscr maths, dates, sources.
<URL:http://www.merlyn.demo n.co.uk/> TP/BP/Delphi/jscr/&c, FAQ items, links.