Tag Cloud JS + Flash. Actual Tags In Cloud Not Clickable?

Question

Hello all,

I've implemented a tag cloud on a site of mine, and I'm using a JS script to populate it, but for some reason, the actual text in the tag cloud is not clickable. It displays and works correctly, but the actual text of the cloud is not getting treated as a link for some odd reason. My question is:

In my script below, do you see anything that I need to fix in order to make my tag cloud's text actually be links?

The site I've implemented it on is a stackexhange site that I run, it is supposed to be a cloud of the "recent tags."

CloudPopulator.js

---

<script type="text/javascript">
var divRecentTags = document.getElementById("recent-tags");
if (divRecentTags) {
var cloud = new SWFObject("some/swfObject/url",    "tagcloudflash", "200", "200", "9", "#ffffff");
cloud.addParam("allowScriptAccess", "always");
cloud.addVariable("tcolor", "0x0a94d6");
cloud.addVariable("tcolor2", "0xC0C0C0");
cloud.addVariable("hicolor", "0x000000");
cloud.addVariable("tspeed", "150");
cloud.addVariable("distr", "true");
cloud.addVariable("mode", "tags");
var aTags = divRecentTags.getElementsByTagName("a");
var tagHtml = "";
for(var i = 0; i < aTags.length; i++) {
    var hrefText = aTags[i].getAttribute("href");
    var cssText = aTags[i].className;
    var tagName = $(aTags[i]).text();
    var styleText = "style=\'font-size: 8pt;\'";
    if (cssText == "post-tag pop1") {
        var styleText = "style=\'font-size: 15pt;\'";
    }
    else if (cssText == "post-tag pop2") {
        var styleText = "style=\'font-size: 22pt;\'";
    }
    var newLinkText = "<a href=\'"+hrefText+"\'"+styleText+">"+tagName+"</a>";
    tagHtml = tagHtml + newLinkText;
}
cloud.addVariable("tagcloud", escape("<tags>" + tagHtml + "</tags>"));
cloud.write("recent-tags");
}
</script>

Answer 1

Quotes

Many of your HTML strings are wrapped in double quotes, and have single quotes escaped unnecessarily. For instance, try replacing this:

"style=\'font-size: 15pt;\'"

with this:

"style='font-size: 15pt;'"

or this:

"style=\"font-size: 15pt;\""

Whitespace

Although most browsers won't flinch over this, mind the whitespace between attributes in your HTML tags. You're currently generating something like:

<a href='#'style='font-size: 15pt;'>...</a>

Note the missing space before style. To fix it, add a leading space whenever you assign a value to styleText.

Variables

The variable styleText is declared multiple times. You should only state var styleText once to declare it, then redefine it with styleText = ... as many times as you want after that.

For slightly better performance and code organization, consider hoisting your var declarations up out of the for loop (to the same level as tagHtml), and recycling those variables within the for loop.

Answer 2

Why do you suspect the JS is the problem? If you put in the data in the flash itself, does it have the same issue? If so, look at your TextFields and make sure they're rendering as HTML and are firing the correct events.