Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > Javascript > onClick not working in IE

Reply
Thread Tools

onClick not working in IE

 
 
Nx
Guest
Posts: n/a
 
      03-15-2006
i've got it all working nicely in firefox, but whenever i test it in IE
none of the onclick events are triggered.

i'm using an xsl to transform an rss feed into a photogallery.

when i try to use setAttribute FF and safari work, but IE stops working
when i used addEventListener and attachEvent safari stops working
and when i tried .onClick,none of them worked

being fairly inexperienced (but learning fast), i figure i'm doing it
wrong
any help is appreciated

snippet:

<![CDATA[for (var i = 0; i <= (the_news.categories.list.length-1);
i++){]]>
if(the_news.categories.list[i]!="News"){
tempCatDiv = document.createElement("div");
tempCatDiv.setAttribute('class','catitem');
tempCatDiv.setAttribute('onClick','showItems("'+th e_news.categories.list[i]+'")');
tempCatDiv.innerHTML = " "+the_news.categories.list[i]+"";
catListDiv.appendChild(tempCatDiv);
}
}

 
Reply With Quote
 
 
 
 
web.dev
Guest
Posts: n/a
 
      03-15-2006

Nx wrote:
> tempCatDiv = document.createElement("div");
> tempCatDiv.setAttribute('class','catitem');
> tempCatDiv.setAttribute('onClick','showItems("'+th e_news.categories.list[i]+'")');


IE's setAttribute method is far from perfect. Try setting those
properties directly:

tempCatDiv.class = "catitem";
tempCatDiv.onclick = function() {
showItems(the_news.categories.list[i]); };

 
Reply With Quote
 
 
 
 
Nx
Guest
Posts: n/a
 
      03-15-2006
thanks, i was formatting the onclick badly the first time, but fixing
it created another problem

tempCatDiv.onclick = function() {
showItems(the_news.categories.list[i]);
};

passes 'undefined' to showItems

can you give a clueless coder another freebie?

 
Reply With Quote
 
RobG
Guest
Posts: n/a
 
      03-16-2006
Nx said on 16/03/2006 7:00 AM AEST:
> i've got it all working nicely in firefox, but whenever i test it in IE
> none of the onclick events are triggered.
>
> i'm using an xsl to transform an rss feed into a photogallery.
>
> when i try to use setAttribute FF and safari work, but IE stops working
> when i used addEventListener and attachEvent safari stops working
> and when i tried .onClick,none of them worked


JavaScript is case sensitive, the property you seek is 'onclick'.


> being fairly inexperienced (but learning fast), i figure i'm doing it
> wrong
> any help is appreciated
>
> snippet:
>
> <![CDATA[


Are you really using XHTML? There seems very little point to it.

> for (var i = 0; i <= (the_news.categories.list.length-1);
> i++){]]>


Don't use tabs, use spaces for indenting code. Manually wrap your code
for posting at about 70 characters to allow for a coupe of quoted
replies before autowrapping takes over.

Why is just the opening - for - statement quoted XHTML-style? Use HTML
and ditch quoting inside script elements. With XHTML, use an external
..js file.

It is also more efficient to store values that are frequently referenced
in (local?) variables - the more dots used, the less efficient it becomes:

for (var i=0, j=the_news.categories.list.length; i<j; i++){


> if(the_news.categories.list[i]!="News"){


Since the_news.categories.list[i] is used multiple times, create a local
variable that references it to save looking it up every time:

var newsItem = the_news.categories.list[i];
if ('News' != newsItem){

> tempCatDiv = document.createElement("div");
> tempCatDiv.setAttribute('class','catitem');
> tempCatDiv.setAttribute('onClick','showItems("'+th e_news.categories.list[i]+'")');


WebDev's suggestion here to use:

tempCatDiv.onclick = function() {
showItems(the_news.categories.list[i]);
};


creates another problem: the value of - the_news.categories.list[i] - is
evaluated when the onclick function executes. At that point, if
the_news.categories.list still exists as a global variable or closure to
a local variable, then the value of the_news.categories.list[i] will be
evaluated.

Since 'i' will also be either a global or closure to a local 'i' inside
whatever function is running here, it too will be evaluated when the
onclick occurs.

That is, the_news.categories.list[i] will be evaluated when the onclick
code is executed, not when the onclick function object was created.

At that time, (if it hasn't been modified elsewhere) the value of 'i'
will be what it was when the for loop finished. It will be the same as
the_news.categories.list.length (whatever that was).

Since the value of the length attribute of a collection or array
(guessing that the_news.categories.list is one or the other) is always
at least one higher than the largest index, the_news.categories.list[i]
does not exist.

e.g. if there were 5 of them, the indexes range from 0 to 4. When the
for loop finishes, i=5 - all the onclick functions will try to access
the_news.categories.list[5] which doesn't exist.

The simple fix is, since the value is always 'News', to use that:

tempCatDiv.onclick = function(){ showItems('News'); };

Since the value 'News' is fixed (and essentially hard-coded in your
current function anyway), why not hard-code it in showItems() and then
you can have:

tempCatDiv.onclick = showItems; // Note no '()'


and showItems is now something like:

function showItems(){
var x = 'News';
...
}


Another, probably less efficient solution but more general, is to use
(with the substitution of newsItem):

tempCatDiv.onclick =
new Function('showItems("'+ newsItem + '"];');


> tempCatDiv.innerHTML = " "+the_news.categories.list[i]+"";


And:
tempCatDiv.innerHTML = " " + newsItem;

> catListDiv.appendChild(tempCatDiv);
> }
> }
>




--
Rob
 
Reply With Quote
 
RobG
Guest
Posts: n/a
 
      03-16-2006
RobG said on 16/03/2006 10:35 AM AEST:
> Nx said on 16/03/2006 7:00 AM AEST:

[...]
>
>> if(the_news.categories.list[i]!="News"){

>
>
> Since the_news.categories.list[i] is used multiple times, create a local
> variable that references it to save looking it up every time:
>
> var newsItem = the_news.categories.list[i];
> if ('News' != newsItem){

[...]
> The simple fix is, since the value is always 'News', to use that:
>
> tempCatDiv.onclick = function(){ showItems('News'); };


Oops! Forgot the '!' the value of newsItem will *not* be 'News' - use
the suggestion below.


[...]
>
> tempCatDiv.onclick =
> new Function('showItems("'+ newsItem + '"];');
>




--
Rob
 
Reply With Quote
 
Thomas 'PointedEars' Lahn
Guest
Posts: n/a
 
      03-17-2006
web.dev wrote:

> Nx wrote:
>> tempCatDiv = document.createElement("div");
>> tempCatDiv.setAttribute('class','catitem');
>>

tempCatDiv.setAttribute('onClick','showItems("'+th e_news.categories.list[i]+'")');
>
> IE's setAttribute method is far from perfect.


Element::setAttribute() has many buggy implementations.

> Try setting those properties directly:


Full ACK.

> tempCatDiv.class = "catitem";


It is `className', which is well-known here. `class' is a reserved
word in several languages, including ECMAScript implementations.


PointedEars
 
Reply With Quote
 
Thomas 'PointedEars' Lahn
Guest
Posts: n/a
 
      03-17-2006
Nx wrote:

> thanks, i was formatting the onclick badly the first time, but fixing
> it created another problem
>
> tempCatDiv.onclick = function() {
> showItems(the_news.categories.list[i]);
> };
>
> passes 'undefined' to showItems


If the_news.categories.list[i] evaluates to a different
value, it should not. The error must be elsewhere.

> can you give a clueless coder another freebie?


You could RTFM for a change.


PointedEars
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Overriding an onclick with another onclick tomlong@gmail.com Javascript 4 01-26-2006 09:26 PM
button.onclick = new Function("func2()") + button.onclick foldface@yahoo.co.uk Javascript 2 09-26-2005 08:13 AM
Slow loading of page and OnClick not working... EMW ASP .Net 1 06-03-2004 07:38 PM
onclick event not working in Netscape 6 moondaddy ASP .Net 5 05-01-2004 08:23 PM
document.onclick=doIt() same as document.onclick=doIt ? bob Javascript 3 08-21-2003 12:14 PM



Advertisments