JavaScriptで同じclass名を持つ要素を出し分けたい

Question

JavaScript初心者です。
preタグ内をクリップボードにコピーできるボタンを作りました。

該当のソースコード

<script> function pre() {
	var copyText = document.querySelector('.aaa');
	var range = document.createRange();
	range.selectNode(copyText);
	window.getSelection().addRange(range);
	document.execCommand("Copy");
	alert("コピーしました");
} </script>

preタグ内にボタンを設置したため、ボタンはコピーされないようにaaaで囲った部分を対象としました。（pre内のbuttonだけコピーしない方法などあれば、聞いておきたいです。）

<pre>
<button onclick="pre()">コピーする</button>
<span class="aaa">
ここにcodeを書く
</span>
</pre>

上記で、コピーボタンの設置や動作は上手くいったのですが、記事内にpreタグを複数設置した場合、一番上のaaaで囲った部分しかコピーされないことに気づきました。

同一classを使用したまま、個別にコピーできるようにするには、どうしたら良いでしょうか？

個別にコピーという表現が分かりづらかったと思い、画像を追記しました。

「teratail」のように、囲ったpreタグそれぞれをコピーできるようにしたいと思っています。

よろしくお願いします。

Answer 1

<pre>
<button>コピーする</button>
<span class="aaa">
ここにcodeを書く
</span>
</pre>
<pre>
<button>コピーする</button>
<span class="aaa">
ここにcodeを書く2
</span>
</pre>
<pre>
<button>コピーする</button>
<span class="aaa">
ここにcodeを書く3
</span>
</pre>

(function(){
document.querySelectorAll('pre').forEach((row)=>{
  row.querySelector('button').onclick = () =>{
      //alert(row.querySelector('.aaa').innerHTML);
      let elm = document.createElement('textarea');
      elm.value = row.querySelector('.aaa').innerHTML;
      document.body.appendChild(elm) ;
      elm.select();
      document.execCommand("copy"); 
      document.body.removeChild(elm);
  };

});

})();

Comments

[J208U0JC0UWOJD9]

hentaiman様

返信ありがとうございます。

分かりづらい表現をしてしまい、申し訳ありません。

質問に画像を追記致しました。

「teratail」の質問画面のように、複数のコード用ボックスを入れても
それぞれをコピーできるようにしたいと思っています。

もしお分かりになるようでしたら、ご教授していただきたいと思います。

よろしくお願いします。

[hentaiman]

コメントに合わせて回答変更しました
コピー処理に関してはalertの部分を適当に改造してください

[hentaiman]

やっぱコピー処理まで追加しておいたので参考にしてみてください

[J208U0JC0UWOJD9]

hentaiman様

ご丁寧にありがとうございます。

実装してみたところ、上手くいきました。

ただ１点だけ、スマホでみた場合、コピーボタンを押すと一番下のフッターまで勝手にスクロールされてしまうのですが、こちらの原因は分かりますでしょうか？

何度も質問して申し訳ありません。

お時間のある時にお返事いただければと思います。

よろしくお願いします。

[hentaiman]

コピーするためにテキストエリア追加して文字選択状態させてるんだけど、その時に画面のフォーカス行ってるんだと思うので、コピーの処理自体を作り直してみてください
同じ書き方でやるなら、elementにdisplaynoneにして押したボタンと同じ位置に追加すれば良い多分大丈夫

Answer 2

HTMLとJavaScriptを少し変更することになります。

onClickで呼び出すときにthisを引数に指定します。

<pre>
<button onclick="pre(this)">コピーする</button>
<span class="aaa">
ここにcodeを書く
</span>
</pre>

JavaScript側で指定された引数を利用します。

function pre(srcObject) {
    var copyText = srcObject.parentElement.querySelector('.aaa');
    var range = document.createRange();
    range.selectNode(copyText);
    window.getSelection().addRange(range);
    document.execCommand("Copy");
    alert("コピーしました");
} 

でどうでしょうか？（他にもいろいろやる方法はあるかと思いますが、一つの方法かなと思います。）

Comments

[J208U0JC0UWOJD9]

JTera様

返信ありがとうございます。

試してみたところ、スマホではそれぞれのpreタグ内をコピーできました。ありがとうございます。
ただ、PC（Chrome環境）だと、最初にコピーした範囲のみ適用されます。

HTMLは以下のように書いています。

<pre>
<button onclick="pre(this)">コピーする</button>
<span class="aaa">
ここにcodeを書く
</span>
</pre>

<pre>
<button onclick="pre(this)">コピーする</button>
<span class="aaa">
ここにcodeを書く2つ目
</span>
</pre>

<pre>
<button onclick="pre(this)">コピーする</button>
<span class="aaa">
ここにcodeを書く3つ目
</span>
</pre>

例えば、3つ目のコピーボタンを最初に押した場合、その後1つ目や2つ目を押しても動作しない状態です。

もとの質問内容にも画像を追加しました。

もし何か原因がわかればご教授いただけたらと思います。

よろしくお願いします。