スポンサーリンク

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

Django
スポンサーリンク

今回の記事は前回できなかったDjangoでjavascriptを用いて画像を入れ替える操作についてです。以前の記事はhtmlのonclickで画像を入れ替えてそれらしく表現していたので今回は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>

こんな感じになっております。

次回は下記タスクあたりをクリアしたい。。
・裏側のカードをクリックの処理を一回のみという制限をかける
・七回のみキノコを出現可能とする制限

本記事を読んでいただき感謝です。サイトを訪れていただいた方はプログラミング勉強中かと思いますのでプログラミング勉強のコツを合わせてご紹介。

スポンサーリンク
スポンサーリンク
スポンサーリンク

ブログに関しては500円程度かかりますが、それ以外は無料です。知識の吸収と並行してアウトプットは非常に効率が良いです。テックアカデミーに関しては講座レベルが高いにも関わらず、無料体験や人気口座も大幅値下げがあるので、重点的に学びたいものを無料体験してみてください。

転職時にも、エンジニアからテックアカデミー・Paizaは認知度が高いので、未経験入社採用を行う際履歴書で目に留まります。特にPaizaのスキルレベルA・SなどはIT業界でも評価されます。

テックアカデミー・Paizaの無料登録ができる期間中にぜひご利用してみてください。私も活用経験ありです。

Django
スポンサーリンク
スポンサーリンク

コメント

タイトルとURLをコピーしました