スポンサーリンク

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

Django
スポンサーリンク

前回の記事で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を用いた画像入れ替えができます!!下記ご参照ください。

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

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

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

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

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

Django
スポンサーリンク
スポンサーリンク
ともぶろぐ

コメント

  1. […] […]

  2. […] Djangoで画像の入れ替えを行う方法。【Djangoでカードクリックゲーム作成!!3日目②】  […]

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