クリック時にコードをコピーさせたい

Question

<pre><code>テスト1</code></pre>
<pre><code>テスト2</code></pre>
<pre><code>テスト3</code></pre>

このようなHTMLの場合に、preをクリック時にコードをコピーさせたいです。
試しにこのようなJavaScriptを作成したのですが、これでは、どこをクリックしても「テスト1」がコピーされてしまいます。わかるかた教えてください！

function copyText () {
  var target = document.querySelector('code');
  var range = document.createRange();
  range.selectNode(target);
  window.getSelection().removeAllRanges();
  window.getSelection().addRange(range);
  document.execCommand('copy');
  return false;
}
document.querySelectorAll("pre").forEach(function (e, i, p) {
  e.addEventListener("click", copyText, false);
});

JSFiddle

Answer 1

それだと、一番初めの要素が選択されてしまいます。

function copyText () {
  var target = document.querySelector('code');
↓↓↓↓
  var target = this.querySelector('code');
```ですね。

その他の場所もおかしいです。
`querySelectorAll`は戻りがNodeListなので、forEachが効かないブラウザがあります。
```javascript
document.querySelectorAll("pre").forEach(function (e, i, p) {
  e.addEventListener("click", copyText, false);
});

↓↓↓↓

Array.prototype.forEach.call(document.querySelectorAll("pre"),function (e, i, p) {
  e.addEventListener("click", copyText, false);
});
```と

[jsfiddle（フォーク）](https://jsfiddle.net/h06vwwtk/6/)

Comments

[2001Y]

まったくJavaScriptを理解してないのに、ありがとうございます！！
コピーにスタイルが反映されるのですが、スタイルなしでコピーさせるなどということは可能なのでしょうか？調べたところできなさそうだったのですが...
また、:after などで作ったボタンをクリック対象にするにはどうすればいいのでしょうか。
JavaScriptでは:after にアクセスできないと聞いたような気もします。

[shi_ue]

普通にHTMLをマウスで選択して、Ctrl+Cでコピーしたのと同じ動作になるわけですから、その辺りはブラウザの仕様としか言いようがありません。

:after や :befor で作られたテキストや画像は、Javascriptでイベントを付けたり出来ません。
でも、:after と同じ位置にJavascriptで要素を追加すればいいと思いますよ。

[2001Y]

なるほど、ありがとうございます。