buttonに画像を

ポーカーを作成していて、カードを取り分ける判定までは完成したのですが、判定後カードの画像をクリックする処理がうまく行きません。
今、例として、1枚目をクリックしたら10枚目を表示するようにしたいのですが、変わりません。input type="image"が良くないのか原因含め教えてください。

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    <tr bgcolor="#ff000d">
19        <th>相手</th>
20        <th>
21            <input type="image" id="image1" src="" onclick="TEHUDA1();" alt="一枚目">
22        </th>
23        <th>
24            <input type="image" src="" id="image3">
25        </th>
26        <th>
27            <input type="image" src="" id="image5">
28        </th>
29        <th>
30            <input type="image" src="" id="image7">
31        </th>
32        <th>
33            <input type="image" src="" id="image9">
34        </th>
35    </tr>
36    <tr bgcolor="#ffffff">
37        <th>自分</th>
38        <th>
39            <input type="image" src="" id="image2">
40        </th>
41        <th>
42            <input type="image" src="" id="image4">
43        </th>
44        <th>
45            <input type="image" src="" id="image6">
46        </th>
47        <th>
48            <input type="image" src="" id="image8">
49        </th>
50        <th>
51            <input type="image" src="" id="image10">
52        </th>
53    </tr>
54    </table>
55</body>
56<script type="text/javascript">
57<!--
58function game_start() {
59    var i;
60    j = 1;
61    k = 1;
62    var Origin = [];
63    var Deck = [];
64    var MyCard = [];
65    var YouCard = [];
66    for (i = 101; i <= 113; i++, j++) { //スペード
67        Origin[j] = i;
68    }
69    for (i = 201; i <= 213; i++, j++) { //ハート
70        Origin[j] = i;
71    }
72    for (i = 301; i <= 313; i++, j++) { //ダイヤ
73        Origin[j] = i;
74    }
75    for (i = 401; i <= 413; i++, j++) { //クローバー
76        Origin[j] = i;
77    }
78    for (j = 1; j <= 52; j++) {
79        var M = (Math.floor(Math.random() * (53 - 1) + 1)); //ここで範囲内の値でランダムをとる-配列数
80        if (Origin[M] != 0) { //オリジナル配列の中身がある場合
81            Deck[j] = Origin[M]; //山札の上から順に入れていく
82            Origin[M] = 0; //使ったオリジナル配列の中身は消去
83        } else { //一度使ったMに当たった場合
84            while (1) { //breakするまで処理
85                var N = (Math.floor(Math.random() * (53 - 1) + 1)); //再度ランダム
86                if (Origin[N] != 0) { //ランダムNが消去されたオリジナル配列以外に当たったら
87                    Deck[j] = Origin[N]; //山札の上からいれていく
88                    break;
89                }
90            }
91            Origin[N] = 0; //オリジナル配列消去
92        }
93    }
94    for (j = 1, k = 1; j <= 52; j++, k++) {
95        document.getElementById("image" + j).src = Deck[j] + ".png";
96        if (j % 2 == 1) {
97            MyCard[k] = Deck[j];
98        } else {
99            YouCard[k] = Deck[j];
100        }
101    }
102}
103
104function TEHUDA1() {
105    document.getElementById("image1").src = Deck[10] + ".png";
106}
107// -->
108</script>
109

行動規範の内容に同意します

回答4件

ベストアンサー

前回の指摘部分がまったく修正されていないうえに指摘漏れと新たなHTML文法ミスがあるので一応指摘します。

<title> 要素が<div> 要素の子要素になっている
<div> 要素の書き方「<div </div>」が問題
bgColor属性は非推奨なのでせめてstyle属性を使うべき
<table> 要素の開始タグ直後に<form> 要素の終了タグがある

「<form><table></form></table>」こういう書き方は出来ません。

残りは前回と同じです。

【JavaScript - javascriptでSTART画面から移動(39962)｜teratail】
https://teratail.com/questions/39962

投稿2016/07/06 15:09

kei344

総合スコア69407

変数のスコープがおかしいような
関数game_start()の変数Deckはローカル変数なので、関数TEHUDA1()で使おうとしているDeck[10]とは別物です、未定義変数としてスクリプトが止まっていませんか？

投稿2016/07/05 08:57

takito

総合スコア3111

Saya_A

2016/07/05 09:04

思わぬ場所が間違えていました。ご指摘ありがとうございます。

行動規範の内容に同意します

input type="image"はsubmitの動作をしますので、TEHUDA1()がfalseをリターンしないと送信されてしまいます。
また、onclick="TEFUDA1()"だとその結果がonclickに伝わらないので、onclick="return TEHUDA1()"としてください。

ってか、onclick="TEFUDA1();return false;"でいいですね。

投稿2016/07/05 08:39

編集2016/07/05 08:41