少しjavascriptの構文ヘルプに必要な（短い質問）

Question

は私がでタグを作成していた外部のjsファイルを持っている。

問題は、私はonclickイベントを追加することになっている場合は、引用符を使用する方法がわからないです次のコードに変更してください。

は今、このコードは動作します：

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

しかし、私は上記にこれを追加する必要があります。

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

は、どのように私はそれが動作するように、コードの最初の部分にonclickイベントを挿入する必要がありますか？ BTW

おかげ

：上記アレイはforループの内側に繰り返されます。例えば、links [counter]には、リンク配列の現在のインデックスが含まれています。たとえば、 "www.somedomain.com"となります。

Answer 1

一重引用符で囲まれた文字列内に一重引用符を使用する際の問題のように見えます。 onclick =事物全体は、一重引用符で囲まれた大きな文字列の中にあることを覚えておいてください。だから単一引用符、バックスラッシュ・エスケープ：

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

を私はあなたが置換の多くを持っている場合は特に、innerHTMLプロパティを使用して避けるだろう。あまりにも多くが間違って行くことができます。たとえば、alts [counter]に特殊なHTML文字（&など）がある場合はどうなりますか？代わりにオブジェクトを操作するためにDOMを使用します。たとえば、

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); 

私はそれをテストしないと推測しましたが、少し間違っている可能性があります。私はすべての属性を割り当てるには、短手のプロパティ表記を使用しますが、私はプロパティの表記を使用してみました、それは私のために動作しませんでしたので、私はonclickを割り当てるためにsetAttributeを使用

注意（DOM HTML仕様はあなたがほとんどを設定することができますプロパティは直接入力できますが、onclickは入力できません）。

Answer 2

あなたはとてもまず私達はちょうど適切に引用型交互に行うことによって、この非常に多くを簡素化することができ、単一引用符で囲まれた文字列に二重引用符（およびその逆）をエスケープする必要はありません

：

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>'; 

を私の意見では、これは受け入れられた答えでDOM操作を行うより簡単な解決策です。私たちは1つのことをエスケープする必要はなく、良い古い文字列連結を除いて、単一の関数を使用していません。

なぜ2種類の引用符がありますか？引用符がたくさんあるシナリオをシンプルにするために！