質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

2399閲覧

buttonに変数.pngの画像をのせる 

Saya_A

総合スコア76

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2016/07/06 08:35

編集2016/07/07 04:20

トランプを上から順に取得し、5枚表示後トランプを選択(クリック)したらそのトランプの背景色を変更させ、変更buttonで次のカードに入れ替える処理を作りたいのですが、うまくいきません。現在input type="imageを用いて、<a>を用いたほうがいいと助言をいただいたのですが、作り方が皆目見当つきません。
どうかお願いします。

具体的には、カードをランダムで表示することはできていても、クリックすると初めの状態に戻る、ということが起きてonclickで関数を実行することができません。

html

1<!DOCTYPE heml> 2<html> 3 4<body> 5 6 <head> 7 <meta charset="UTF-8"> 8 <meta name="author" content=""> 9 <link rel="stylesheet" href="poker.css" media="all"> 10 <canvas id="Main" width="550" height="200"></canvas> 11 <div style="position:absolute; top:2px; left:100px;" <title>ポーカー</title> 12 </div> 13 </head> 14 <form name="forms"> 15 <input type="button" value="ゲームスタート!" onClick="game_start()" name="start" style="width:300px;height:80px;font-size:30px"> 16 <table border=1 cellspacing=" 5 "> 17 </form> 18 <div id=C ard> 19 <tr bgcolor="#ff000d"> 20 <th>相手</th> 21 <th> 22 <input type="image" src="" id="image1"> 23 </th> 24 <th> 25 <input type="image" src="" id="image3"> 26 </th> 27 <th> 28 <input type="image" src="" id="image5"> 29 </th> 30 <th> 31 <input type="image" src="" id="image7"> 32 </th> 33 <th> 34 <input type="image" src="" id="image9"> 35 </th> 36 </tr> 37 <tr bgcolor="#ffa32f"> 38 <th>自分</th> 39 <th> 40 <input type="image" src="" id="image2"> 41 </th> 42 <th> 43 <input type="image" src="" id="image4"> 44 </th> 45 <th> 46 <input type="image" src="" id="image6"> 47 </th> 48 <th> 49 <input type="image" src="" id="image8"> 50 </th> 51 <th> 52 <input type="image" src="" id="image10"> 53 </th> 54 </tr> 55 </table> 56 </div> 57</body> 58<script type="text/javascript"> 59<!-- 60var P=1; 61var Origin = []; 62var Deck = []; 63var MyCard = []; 64var YouCard = []; 65 66function game_start() { 67 j = 1; 68 k = 1; 69 70 for (i = 101; i <= 113; i++, j++) { //スペード 71 Origin[j] = i; 72 } 73 for (i = 201; i <= 213; i++, j++) { //ハート 74 Origin[j] = i; 75 } 76 for (i = 301; i <= 313; i++, j++) { //ダイヤ 77 Origin[j] = i; 78 } 79 for (i = 401; i <= 413; i++, j++) { //クローバー 80 Origin[j] = i; 81 } 82 for (j = 1; j <= 52; j++) { 83 var M = (Math.floor(Math.random() * (53 - 1) + 1)); //ここで範囲内の値でランダムをとる-配列数 84 if (Origin[M] != 0) { //オリジナル配列の中身がある場合 85 Deck[j] = Origin[M]; //山札の上から順に入れていく 86 Origin[M] = 0; //使ったオリジナル配列の中身は消去 87 } else { //一度使ったMに当たった場合 88 while (1) { //breakするまで処理 89 var N = (Math.floor(Math.random() * (53 - 1) + 1)); //再度ランダム 90 if (Origin[N] != 0) { //ランダムNが消去されたオリジナル配列以外に当たったら 91 Deck[j] = Origin[N]; //山札の上からいれていく 92 break; 93 } 94 } 95 Origin[N] = 0; //オリジナル配列消去 96 97 } 98 //document.write("<BR>"+j+":::"+Deck[j]);1-52の並び順チェック 99 } 100 for (j = 1, k = 1; j <= 52; j++, k++) { 101 document.getElementById("image" + j).src = Deck[j] + ".png"; 102 if (j % 2 == 1) { 103 YouCard[k] = Deck[j]; 104 Deck[j]=0; 105 } else { 106 MyCard[k] = Deck[j]; 107 Deck[j]=0; 108 } 109 } 110} 111 112function TEHUDA1() { 113 document.getElementById("image"+2).src = Deck[11] + ".png"; 114 return false; 115} 116function TEHUDA2() { 117 document.getElementById("image"+4).src = Deck[12] + ".png"; 118 return false; 119} 120function TEHUDA3() { 121 document.getElementById("image"+6).src = Deck[13] + ".png"; 122 return false; 123} 124function TEHUDA4() { 125 document.getElementById("image"+8).src = Deck[14] + ".png"; 126 return false; 127} 128function TEHUDA5() { 129 document.getElementById("image"+10).src = Deck[15] + ".png"; 130 return false; 131} 132 133 134 135 136// --> 137</script> 138

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Lhankor_Mhy

2016/07/06 11:11

『うまくいきません』とは具体的には何が起きていますか? 「こうなると思ったが、このようになった」「このようなエラーメッセージが出た」など、具体的に補足願います。
Chironian

2016/07/06 13:37

すいません。回答依頼を頂きましたが、JavaScriptには詳しくないので回答できません。
kei344

2016/07/06 14:48

画像のリンクが不完全ですので、再アップロードされてはいかがでしょうか。
shi_ue

2016/07/07 05:10

前の質問は放置ですか?input type=imageはサブミットの動作をするからページがリロードされるって書いてあるのに・・・
Saya_A

2016/07/07 05:25

放置ではなく、<a>を用いた方法など具体的な方法が知りたいため質問しました。
guest

回答1

0

ベストアンサー

html

1<input type="image" src="" id="image2"> 2↓↓↓ 3<a href="javascript:クリック時のfunction(2)"><img src="" id="image2"></a> 4```みたいな感じ?

投稿2016/07/07 05:31

編集2016/07/07 05:41
shi_ue

総合スコア4437

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問