-1

I have an external js file which I am creating a tag in.

Problem is I don't know how to use the quotes if I am to add an onclick event to the code below.

Now this code works:

banner_div.innerHTML = '<a href=\"'+links[counter]+'\"><img src=\"'+images[counter]+'\" border=\"1px\" style=\"border-color:#000;\" alt=\"'+alts[counter]+'\" title=\"'+titles[counter]+'\"></a>';

But I need to add this to the above:

onclick="_gaq.push(['_trackEvent', 'Link Clicks', 'From Index.html', 'www.domain.com']);"

How should I insert the onclick event to the first piece of code so it works?

Thanks

BTW: The arrays above are iterated inside a for loop. So for example links[counter] contains the current index of the links array, which could be for example "www.somedomain.com".

Improve this question
1
  • This question is similar to: How to escape a single quote inside a JavaScript variable. If you believe it’s different, please edit the question, make it clear how it’s different and/or how the answers on that question are not helpful for your problem. Commented Jul 29, 2024 at 8:02

2 Answers 2

Reset to default
1

Looks like a problem with using single quotes inside a single-quote delimited string. Remember, the whole onclick= thing is inside the large string surrounded by single quotes. So just backslash-escape the single quotes:

onclick="_gaq.push([\'_trackEvent\', \'Link Clicks\', \'From Index.html\', \'www.domain.com\']);"

I would avoid using innerHTML, especially if you have a lot of substitutions. Too much can go wrong. For example, what if alts[counter] has some special HTML characters such as &? I would use the DOM to manipulate the object instead. For example

a = document.createElement("a");
a.href = links[counter];
a.setAttribute("onclick", "_gaq.push(['_trackEvent', 'Link Clicks', 'From Index.html', 'www.domain.com']);")
img = document.createElement("img");
img.src = images[counter];
img.border = "1px";
img.style = "border-color:#000;";
img.alt = alts[counter];
img.title = titles[counter];
a.appendChild(img);
banner_div.appendChild(a);

Though I guessed that without testing it, so it might be a bit wrong.

Note that I used short-hand property notation to assign all the attributes, but I used setAttribute to assign onclick because I tried using the property notation and it didn't work for me (the DOM HTML specification allows you to set most properties directly, but not onclick).

Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

+1, good answer. That last part isn't quite right, though - some browsers will allow you to assign a string to onclick but as a general rule you should assign a function, e.g. a.onclick = function () { _gaq.push([..., ...]); };.
@Andy E: Can you find a specification for assigning a function object to a property like that? The DOM HTML spec doesn't mention those properties (it gives a list of special HTML attributes which may be referenced as properties instead of using setAttribute). The HTML4 spec (under Scripts) merely mentions that onclick and the like are attributes which take strings containing the script. I haven't tried the two approaches in many different browsers, but from a reading of the specs, it seems like setAttribute is definitely standardised, whereas the other approach I can't find a reference.
@mguica: I don't think there was a solid definition until HTML5, which specifies that event handlers are exposed as IDL attributes (interface properties) and may also be exposed as content attributes. IDL attributes expect a Function object, content attributes expect a valid FunctionBody representation. You can read more about it here. There are many interoperable features of browsers that are only just reaching a formal definition in the specifications.
0

You don't have to escape double-quotes in a single-quoted string (and vice versa), so first we can simplify this quite a lot by just alternating quote-type appropriately:

banner_div.innerHTML = '<a onclick="' + "_gaq.push(['_trackEvent', 'Link Clicks', 'From Index.html', 'www.domain.com']);" + '" href="' + links[counter] + '"><img src="' + images[counter] + '" border="1px" style="border-color:#000;" alt="' + alts[counter] + '" title="' + titles[counter] + '"></a>';

In my opinion, this is a simpler solution than doing the DOM-manipulation in the accepted answer. We don't have to escape a single thing and we're not using a single function except good old string concatenation.

Why do we have two kinds of quotes? In order to make scenarios with lots of quotes (like this) simple!

Improve this answer

Comments