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]

On Wed, 17 Nov 2004 23:16:41 +1300, WindAndWaves <ac****@ngaru.c om> wrote:

I have the following code:
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.
function CI(ImgN, Alt){
if(document.get ElementById && document.getEle mentById('il')) {
var d=document.getE lementById('il' );
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) {
if(document.cre ateElement) {
if(document.cre ateElement && d.appendChild && d.removeChild) {
var i=document.crea teElement('img' );
i.src="i/" + ImgN;
i.className='l' ;
i.alt=Alt;

while(d.firstCh ild!==null){
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.
d.removeChild(d .firstChild);
}
d.appendChild(i );
return false;
} else if(d.innerHTML) {
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.
d.innerHTML='<i mg src="i/' + ImgN + '" class="l" alt="'
+ Alt + '" ONCLICK="return XI()">';
return false;
} else {
return true;
}
} else {
return true;
}
}
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.
I now want to add the onclick event to the img (so that the user can
close it),

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]

Michael Winter wrote:
[...]

function CI(ImgN, Alt){
[...]
+ Alt + '" ONCLICK="return XI()">';

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

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]

On Wed, 17 Nov 2004 21:39:50 +1000, RobG <rg***@iinet.ne t.auau> wrote:

Michael Winter wrote:

[snip]

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

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?

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]

"Michael Winter" <M.******@bluey onder.co.invali d> wrote in message
news:opshlxyqqr x13kvk@atlantis ...

On Wed, 17 Nov 2004 21:39:50 +1000, RobG <rg***@iinet.ne t.auau> wrote:

Michael Winter wrote:

[snip]

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

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?

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.

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

[SimonFx]

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]

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]

Michael Winter wrote: while(d.firstCh ild!==null){
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.
d.removeChild(d .firstChild);
}

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]

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

Are you misquoting me, or is it Developersdex?

Michael Winter wrote:

On Wed, 17 Nov 2004 23:16:41 +1300, WindAndWaves <ac****@ngaru.c om>
wrote:

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

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.

d.removeChild(d .firstChild);
}

Wouldn't this:

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

...be more utilitarian?

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]

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!