画像をクリックすると切り替わる処理を複数行いたい

Question

前提・実現したいこと

javascriptを使って、画像をクリックするとその画像が切り替わる、という処理を別々の画像で複数行いたいです。

発生している問題・エラーメッセージ

クリックして切り替えられる画像が１つ（１セット）しか作れません。

該当のソースコード

<div style="position:absolute; top:40px; left:751px"> 


		
        <img id="mypic" onclick="slideshow()" src="1.PNG" alt="a">
           <script>
            var pics_src = new Array("1.PNG","2.PNG","3.PNG","4.PNG","4_1.PNG","5.PNG","6.PNG","7.PNG","8.PNG","13.PNG");
            var num = 0;
 
            function slideshow(){
                if (num == 9) {
                    num = 9;
                }
                else {
                    num ++;
                }
                document.getElementById("mypic").src=pics_src[num];
            }
            </script>
	
</div>
	<div style="position:absolute; top:32px; left:80px"> 

<img id="1" onclick="slideshow1()" img src="p.png" alt="body" cmanOMat="move" >
		 <script>
            var 1 = new Array("p.PNG","p1.PNG","p2.PNG","p3.PNG",);
            var num = 0;
 
            function slideshow1(){
                if (num == 3) {
                    num = 0;
                }
                else {
                    num ++;
                }
                document.getElementById("1").src=pics_src[num];
            }
            </script>

このような感じでdivがあと１４個続きます
	
</div>
	

試したこと

divで分けても、関数自体が１種類だから最初の画像にしか処理が適応されないのだと考え、slideshow１，slideshow２…といったように関数を複数作ればいいのかと思ったのですが、派生させたものはクリックしても何も起こらなくなってしまいました。

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

着せ替え人形のようなものを作りたいので、画像をドラッグで動かせるコードも入れています。
dream weaver2021を使っています。学校の課題で初めてhtmlやcssやjavascriptに触れるので至らぬ点がございますが、どうぞよろしくお願いします。

Comments

[yambejp]

これはホントにjavaですか？

[20210112]

htmlとjavascriptを使ってい（るとおもってい）ます…　自信がないのでタイトル変更しますね

[20210112]

変更しました！ご迷惑おかけしてすみません。

[yambejp]

なるほど、javaではなさそうなので、javaをとったのは賢明ですが
javascriptタグは付けておいたほうがいいです。

[20210112]

お恥ずかしながらjavaとjavascriptを同じものだと思っていました。つけておきます！

Answer 1

jsでHTML要素のドラッグをしたいならjQueryUIのdraggable処理が楽だと思います

Comments

[20210112]

回答ありがとうございます！ドラッグする方法も複数あるのですね。試してみます。
クリックで画像を変化させる処理を複数の場合に分けて行う方法は何かあるでしょうか…？