【Django】JavaScriptを使用して、画像を変更する方法。

今回の記事は前回できなかったDjangoでjavascriptを用いて画像を入れ替える操作についてです。以前の記事はhtmlのonclickで画像を入れ替えてそれらしく表現していたので今回はJavaScriptを使用して、画像の入れ替えを行っていきます。

以前の記事は下記です。

「【Django】JavaScriptのクリックイベントで画像表示と画像変更を行う方法。」

Django内でのJavaScriptの制約
DjangoプロジェクトでJavaScriptを使用して、画像を変更する

Django内でのJavaScriptの制約

では早速本記事の説明ですが、Djangoではある種の制約で下記の通常のjavascriptの記述では画像の入れ替えができせんでした。（私の環境だけなのかもしれませんが。。）
別の関数は読み込めていたのでidが取得できていないのか、そもそもこの操作に対応していないのか。

function LinkClick() {
　　　　　document.getElementById("指定のid").src="{% static "ap/image/kinoko/cards.png" %}";
}

その為さらに思考錯誤した結果ようやくjavascriptにて画像入れ替えを行うことができたのでその説明です。

DjangoプロジェクトでJavaScriptを使用して、画像を変更する

<html>
{% load static %}
<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" type="text/css" href="{% static 'ap/css/gamepage_css1.css' %}">
    
    <title>きのこがり</title>
</head>
<body>
    <script type="text/javascript">
        function LinkClick() {
            
            var elem = document.getElementById("image01");
            
            var param = Math.floor(Math.random() * 6);
        
            switch (param) {
                case 0:
                    elem.src = '{% static "ap/image/kinoko/kinoko1.png" %}';
                    break;
                case 1:
                    elem.src = '{% static "ap/image/kinoko/kinoko2.png" %}';
                    break;
                case 2:
                    elem.src = '{% static "ap/image/kinoko/kinoko3.png" %}';
                    break;
                case 3:
                    elem.src = '{% static "ap/image/kinoko/kinoko4.png" %}';
                    break;
                case 4:
                    elem.src = '{% static "ap/image/kinoko/kinoko5.png" %}';
                    break;
                case 5:
                    elem.src = '{% static "ap/image/kinoko/kinoko6.png" %}';
                    break;
                case 6:
                    elem.src = '{% static "ap/image/kinoko/kinoko7.png" %}';
                    break;
          }
        }
    </script>
</body>
<body>
    <img id="image01" src="{% static "ap/image/kinoko/cards.png" %}" href="javascript:void(0);" onclick="LinkClick()";/>
</body>

関数の作り方等は特に変わっておりません。基本的なgetelementでidを取得させ、そこのsrcに別のDjangoのimageの記述を記載。

前回の記事でもこの書き方だったのに何が問題でできていないのかの原因が結局わからない。
新しい記述のhrefの箇所も記載する必要はなさそうだしほんとにどこが原因なんだ。。

まあこれで下記のように変化させることができるのでよしとしましょう。

ただし何度もクリックできてしまうのでまだ修正が必要です。

javascriptにてswitchの記述でどのカードが出るかを記載しております。

あとはカードを増やして一度のみのクリックに制限をかけて完成に近づいてきました。

最終的なコードは下記です。
コチラでカードの数量とクリックでカードを変更させるところまでは実施できております。

<html>
{% load static %}
<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" type="text/css" href="{% static 'ap/css/gamepage_css1.css' %}">
    
    <title>きのこがり</title>
</head>
<body>
    <script type="text/javascript">
        
        function LinkClick(i) {
            
            var elem = document.getElementById("image"+i);
            var param = Math.floor(Math.random() * 6);
        
            switch (param) {
                case 0:
                    elem.src = '{% static "ap/image/kinoko/kinoko1.png" %}';
                    break;
                case 1:
                    elem.src = '{% static "ap/image/kinoko/kinoko2.png" %}';
                    break;
                case 2:
                    elem.src = '{% static "ap/image/kinoko/kinoko3.png" %}';
                    break;
                case 3:
                    elem.src = '{% static "ap/image/kinoko/kinoko4.png" %}';
                    break;
                case 4:
                    elem.src = '{% static "ap/image/kinoko/kinoko5.png" %}';
                    break;
                case 5:
                    elem.src = '{% static "ap/image/kinoko/kinoko6.png" %}';
                    break;
                case 6:
                    elem.src = '{% static "ap/image/kinoko/kinoko7.png" %}';
                    break;
          
          }
        }
    </script>

    <table id = 'player' width="1000" height="200">
        <th>{{ player1 }}</th><th>{{ player2 }}</th><th>{{ player3 }}</th>   
        
        <th></th><th></th><th></th>
    </table>

    <body>
        <div>
            <img id="image1" src="{% static "ap/image/kinoko/cards.png" %}" onclick="LinkClick(1);"/>
            <img id="image2" src="{% static "ap/image/kinoko/cards.png" %}" onclick="LinkClick(2);" />
            <img id="image3" src="{% static "ap/image/kinoko/cards.png" %}" onclick="LinkClick(3);" />
            <img id="image4" src="{% static "ap/image/kinoko/cards.png" %}" onclick="LinkClick(4);" />
            <img id="image5" src="{% static "ap/image/kinoko/cards.png" %}" onclick="LinkClick(5);" />
            <img id="image6" src="{% static "ap/image/kinoko/cards.png" %}" onclick="LinkClick(6);" />
            <img id="image7" src="{% static "ap/image/kinoko/cards.png" %}" onclick="LinkClick(7);" />
            <img id="image8" src="{% static "ap/image/kinoko/cards.png" %}" onclick="LinkClick(8);" />
            <img id="image9" src="{% static "ap/image/kinoko/cards.png" %}" onclick="LinkClick(9);" />
            <img/>
            <img id="image00" src="{% static "ap/image/kinoko/dokumark.png" %}">
        </div>
        <div>
            <img id="image11" src="{% static "ap/image/kinoko/cards.png" %}" onclick="LinkClick(11);"/>
            <img id="image12" src="{% static "ap/image/kinoko/cards.png" %}" onclick="LinkClick(12);" />
            <img id="image13" src="{% static "ap/image/kinoko/cards.png" %}" onclick="LinkClick(13);" />
            <img id="image14" src="{% static "ap/image/kinoko/cards.png" %}" onclick="LinkClick(14);" />
            <img id="image15" src="{% static "ap/image/kinoko/cards.png" %}" onclick="LinkClick(15);" />
            <img id="image16" src="{% static "ap/image/kinoko/cards.png" %}" onclick="LinkClick(16);" />
            <img id="image17" src="{% static "ap/image/kinoko/cards.png" %}" onclick="LinkClick(17);" />
            <img id="image18" src="{% static "ap/image/kinoko/cards.png" %}" onclick="LinkClick(18);" />
            <img id="image19" src="{% static "ap/image/kinoko/cards.png" %}" onclick="LinkClick(19);" />
            <img id="image20" src="{% static "ap/image/kinoko/cards.png" %}" onclick="LinkClick(20);" />
            <img id="image00" src="{% static "ap/image/kinoko/cards.png" %}" onclick="LinkClick();" />
        </div>
        <div>
            <img id="image21" src="{% static "ap/image/kinoko/cards.png" %}" onclick="LinkClick(21);"/>
            <img id="image22" src="{% static "ap/image/kinoko/cards.png" %}" onclick="LinkClick(22);" />
            <img id="image23" src="{% static "ap/image/kinoko/cards.png" %}" onclick="LinkClick(23);" />
            <img id="image24" src="{% static "ap/image/kinoko/cards.png" %}" onclick="LinkClick(24);" />
            <img id="image25" src="{% static "ap/image/kinoko/cards.png" %}" onclick="LinkClick(25);" />
            <img id="image26" src="{% static "ap/image/kinoko/cards.png" %}" onclick="LinkClick(26);" />
            <img id="image27" src="{% static "ap/image/kinoko/cards.png" %}" onclick="LinkClick(27);" />
            <img id="image28" src="{% static "ap/image/kinoko/cards.png" %}" onclick="LinkClick(28);" />
            <img id="image29" src="{% static "ap/image/kinoko/cards.png" %}" onclick="LinkClick(29);" />
            <img id="image30" src="{% static "ap/image/kinoko/cards.png" %}" onclick="LinkClick(30);" />
            <img id="image00" src="{% static "ap/image/kinoko/cards.png" %}" onclick="LinkClick();" />
        </div>
        <div>
            <img id="image31" src="{% static "ap/image/kinoko/cards.png" %}" onclick="LinkClick(31);"/>
            <img id="image32" src="{% static "ap/image/kinoko/cards.png" %}" onclick="LinkClick(32);" />
            <img id="image33" src="{% static "ap/image/kinoko/cards.png" %}" onclick="LinkClick(33);" />
            <img id="image34" src="{% static "ap/image/kinoko/cards.png" %}" onclick="LinkClick(34);" />
            <img id="image35" src="{% static "ap/image/kinoko/cards.png" %}" onclick="LinkClick(35);" />
            <img id="image36" src="{% static "ap/image/kinoko/cards.png" %}" onclick="LinkClick(36);" />
            <img id="image37" src="{% static "ap/image/kinoko/cards.png" %}" onclick="LinkClick(37);" />
            <img id="image38" src="{% static "ap/image/kinoko/cards.png" %}" onclick="LinkClick(38);" />
            <img id="image39" src="{% static "ap/image/kinoko/cards.png" %}" onclick="LinkClick(39);" />
            <img id="image40" src="{% static "ap/image/kinoko/cards.png" %}" onclick="LinkClick(40);" />
            <img id="image00" src="{% static "ap/image/kinoko/cards.png" %}" onclick="LinkClick();" />
        </div>
    </body>
</body>

</html>