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

前回の記事でDjangoの外観部分に関しては完成し、本記事でいよいよカードを動かすjavascriptを記述していきます。
javascriptほぼ初心者ですので最初全くわかりませんでしたがようやくつかめつつあるかもです。まだかなり表面上ですが。やはりいろいろな言語にTRYすることは楽しいですねw

前回の記事はコチラをご参照ください。

結論から言うとかなり沼にはまりました。
javascriptを使用して画像の変更を行うことがなかなかできない中試行錯誤するうちにjavascriptを使用せずに画像の差し替えができるようになってしまったので今回はそんな感じの記事になってます。

Djangoにてjavascriptを使って画像入れ替えを行った記事はコチラからご参照ください！！

私の失敗談を踏まえた上でみなさんはぜひ回避できるように願っております。

Djangoでクリックイベント(javascript)を設定

Djangoを使用する上で前の記事で紹介しました、変数の引き継ぎなどで少し通常のルールとは違うてんがあるようですが大枠は同じです。
下記がjavascriptでidを取得しクリックさせればイベントが起きるというコードです。

function test() {
      document.getElementById("ここに指定のid");
      alert("test");
}

<button id="ここに指定のid" onclick="test()"></button>

これでボタンをクリックすればalaertが出てきます。
ここまではよく記事もあるのですがimg要素にidをつけている記事がなく不安でしたがなんおことはない、下記でも問題ないです。

<img src＝”imgのpath” id="ここに指定のid" onclick="test()">

つまりDjango上でも応用すれば下記は可能です。

{% load static %}
<img id=image01" src="{% static "ap/image/kinoko/cards.png" %}" onclick="test()">

これで今回gamepageでもカードをクリックすればtest()関数を行えるようになっています。ここまでは可能まあなんとかんいきました。
次に裏向きのカードの画像をクリックすればキノコの画像に変化させる必要があります。画像を差し替える記事に移っていきましょう！！

本記事のメインとなりますがコチラも結論から言うと記事の差し替えは通常のjavascriptの記述では行えませんでした。

function LinkClick() {
　　　　　document.getElementById("指定のid").src="変更画像先のpath";
}

下記がDjangoの場合です。

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

{% load static %}
<img id=image01" src="{% static "ap/image/kinoko/cards.png" %}" onclick="test()">

実際参考記事はたくさんありますが私の環境ではうまく実行反映できず、また参考記事ないでも成功しているのかの有無は記載しておらず実際はできてないのでは？とか思っちゃいます。。私の環境が悪いのかもですが。

ここでかなり時間を使ったのですが試行錯誤しているとあることに気づきました。

javascriptとは違いonclickの働きにより画像変更は可能と言うことです。

{% load static %}
<img id=image01" src="{% static "ap/image/kinoko/cards.png" %}" onclick="{% static "ap/image/kinoko/kinoko1.png" %}">

これでクリックすれば画像の変更は可能とわかりました。
これできたときは嬉しかったw

ただ今回のゲームでは、ランダムにカードを配置等の作業が必要なのでjavascriptでのカードの変更が必要不可欠。さらに考えていきます。次回ついにDjangoにてjavascriptを用いた画像入れ替えができます！！下記ご参照ください。