(++count)による同一のカウント数値を使いまわしたいです

Question

前提・実現したいこと

下記jsの
if(tags[i].className=="hogehoge") tags[i].id="hoge"+(++count).toString();
のカウント部分と
let span = document.getElementById('hoge' + (++count));
のカウント部分の数字を同じにするにはどのように記述したらよいでしょうか…？

例えば、
if(tags[i].className=="hogehoge") tags[i].id="hoge"+(++count).toString();
で出たカウント数値「"hoge"+(++count)」を「変数Z」として格納して
let span = document.getElementById(【変数Z】);
のように使う、といったことをしたいです。

ご教授頂けますと幸いです。

該当のソースコード

//囲んだ部分をコピー
  function copy(){
    //範囲を指定
    let range = document.createRange();
    let span = document.getElementById('hoge' + (++count));
    
    range.selectNodeContents(span);

    //指定した範囲を選択状態にする
    let selection = document.getSelection();
    selection.removeAllRanges();
    selection.addRange(range);

    //コピー
    document.execCommand('copy');
  }

//
var tags=document.getElementsByTagName("span");
var count=0;
for (var i=0;i<tags.length;i++){
if(tags[i].className=="hogehoge") tags[i].id="hoge"+(++count).toString();
}

上記jsを使用して、htmlはこのように記述しています。

<span class="hogehoge">1</span>
<button type="button" onclick="copy()">btn</button>

<span class="hogehoge">2</span>
<button type="button" onclick="copy()">btn</button>

<span class="hogehoge">3</span>
<button type="button" onclick="copy()">btn</button>

<span class="hogehoge">4</span>
<button type="button" onclick="copy()">btn</button>
.
.
.

spanとbuttonが増えた数だけ、htmlのidやclassを直接書き換えるのではなく、jsによってidを振って該当する範囲内だけコピーするようにしたいです。

Comments

[int32_t]

関数 copy() で使う hoge<数値> はどうやって決まるのですか? copy()を呼ぶたびに数値が増える?

[pkpk0120]

説明不足でごめんなさい！htmlに<span class="hogehoge">１</span><span class="hogehoge">２</span>といったように複数のclass="hogehoge"を記述しhogeの数値を増やしていきます。

[int32_t]

copy()関数をどうやって呼んでいるのですか? カウントを使いまわしたい、と言われても、全体の構成がわからないと答えようがないです。

[pkpk0120]

htmlにonclick="copy()"の記述を加えることで呼んでいます！
<button type="button" onclick="copy()">btn</button>

[int32_t]

そのボタンは押すたびに対象spanが変わるのですか? それとも対象spanの数だけボタンも存在するのですか?
HTMLとJavaScriptをすべて開示してください。断片的な情報だけではこういった質問を繰り返す必要があります。

[pkpk0120]

記述不足で本当にごめんなさい。html部分も追記させて頂きました。ほかになにか不明点や記述すべき個所などありましたら追記させて頂きます！

Answer 1

そもそもidを与える必要はなさそうです。

onclick="copy()" を onclick="copy(event)" に変更して、copy() 関数を以下のようにするのはどうでしょう。

  function copy(event){
    //範囲を指定
    let range = document.createRange();
    let span = event.target.previousElementSibling;

Comments

[pkpk0120]

回答ありがとうございます！こちらの記述を試してみたところ、下記のようなエラーがでてしまいました。
Uncaught TypeError: Cannot read property 'target' of undefined
copy() 関数内のrange.selectNodeContents(span);や「範囲を選択状態にする」部分の記述をコメントアウトして試してみたのですが、同じエラーがでてしまいます。原因がわからず…ごめんなさい。