[JavaScript]関数の仮引数から、id属性名として検索をかけたいです。

Question

前提・実現したいこと

関数の仮引数をid属性名として検索をかけたいです。
仮引数がそのまま文字列として扱われてしまうのですが、
何か方法はないでしょうか？

説明がわかりづらくて申し訳ございません。

該当のソースコード

            <div class="kids_photo photo_gal">
                <img src="gallery_contents/kids1.JPG" alt="kids" class="photo kids" id="test">
                <section class="kids hide">
                    <img src="gallery_contents/kids/1.JPG" id="kids" alt="kids" value="1" class="photo_con" >
                    <label class="control">
                        <span class="batsu"></span>
                        <span class="modoru" onclick="next(kids,-1,3)"></span>
                        <span class="susumu" onclick="next(kids,1,3)"></span>
                    </label>
                </section>
                <p class="name">Kids</p>
            </div>
            <div class="baby_photo photo_gal">
                <img src="gallery_contents/baby1.JPG" id="baby" alt="baby" value="1" class="photo_con">
                <section class="Baby hide">
                    <img src="gallery_contents/baby/1.JPG" alt="Baby" class="photo_con">
                    <label class="control">
                        <span class="batsu"></span>
                        <span class="modoru" onclick="next(baby,-1,4)"></span>
                        <span class="susumu" onclick="next(baby,1,4)"></span>
                    </label>
                </section>
                <p class="name">Baby</p>
            </div>

function next(genre,num,max){ //ID要素、value何番目の写真か、最大何枚あるのか
      var first = document.getElementById(`${genre}`);
      console.log(first);

試したこと

調べたところ${}を使えばできるかなと思いましたが、できませんでした。

補足情報（FW/ツールのバージョンなど）

今後行たいこととして、写真がたくさん並んだギャラリーがあり、写真を押すと、
その写真が大きくなり次ボタンと戻るボタンが出てくる。
ボタンを押すとその写真に関する別の写真に切り替わるというポップアップの手動スライドショーを作りたいです。
それぞれの写真に対応できるようにしたいので、
仮引数をidにすることで、一つの関数で済むようにしようと考えています。
このようなシステムで方法などご存知の方がいましたら、
全体的なことでも教えていただけると嬉しいです。

Comments

[ockeghem]

どういう関数呼び出しを想定しているか、呼び出し例も追記してください。

[think49]

ID要素は<id>を差します。
正しい用語を使って下さい。
https://so-zou.jp/web-app/tech/html/specification/element-attribute.htm

[andy23]

ockeghemさん
呼び出し例も記載しました。
必要そうな箇所は記載しましたが、足りない場合は申し付けください。

[andy23]

think49さん
申し訳ございません。
勉強します。urlまで載せていただきありがとうございます。

Answer 1

呼び出し側は以下のように文字列リテラル（シングルクォートなどで囲む）で指定してください。ただ、今はspan要素の中身がないですが、これだとクリックできますか?

onclick="next('baby',-1,4)"

関数側は、以下で大丈夫のはずです。

function next(genre,num,max){ //ID属性、value何番目の写真か、最大何枚あるのか
      var first = document.getElementById(genre);
      console.log(first);

Comments

[andy23]

できました！！
ありがとうございます！！
span要素はcssで矢印になるようにしていました。
拙い説明の中で教えていただきとても感謝です。