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!="News"){
Since the_news.categories.list is used multiple times, create a local
variable that references it to save looking it up every time:
var newsItem = the_news.categories.list;
if ('News' != newsItem){
tempCatDiv = document.createElement("div");
tempCatDiv.setAttribute('class','catitem');
tempCatDiv.setAttribute('onClick','showItems("'+the_news.categories.list+'")');
WebDev's suggestion here to use:
tempCatDiv.onclick = function() {
showItems(the_news.categories.list);
};
creates another problem: the value of - the_news.categories.list - 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 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 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
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+"";
And:
tempCatDiv.innerHTML = "· " + newsItem;
