![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?8acaa2e)
javascriptを勉強し始めて間もない初心者です。
練習として神経衰弱を作ろうとしているのですが、うまく動いてくれません。
どこが間違っているのでしょうか。
/---------------------------------------------------------/
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitio …
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>神経衰弱</title>
<style type="text/css">
ul {
width: 300px;
list-style:none;
margin: 0;
padding: 0;
}
li {
float:left;
margin: 0;
padding; 0:
}
img {
vertical-align: bottom; /*上下隙間埋め*/
}
#all {
width: 300px;
margin: 0px auto 0px;
margin-top: 50px;
}
</style>
</head>
<body>
<div id="all">
<ul>
<li><img src="none.jpg" alt="3" width="100" height="100" id="c_1" onclick="conce('c_1')" /></li>
<li><img src="none.jpg" alt="1" width="100" height="100" id="c_2" onclick="conce('c_2')" /></li>
<li><img src="none.jpg" alt="4" width="100" height="100" id="c_3" onclick="conce('c_3')" /></li>
<li><img src="none.jpg" alt="4" width="100" height="100" id="c_4" onclick="conce('c_4')" /></li>
<li><img src="none_2.jpg" alt="" width="100" height="100"/></li>
<li><img src="none.jpg" alt="2" width="100" height="100" id="c_5" onclick="conce('c_5')" /></li>
<li><img src="none.jpg" alt="1" width="100" height="100" id="c_6" onclick="conce('c_6')" /></li>
<li><img src="none.jpg" alt="2" width="100" height="100" id="c_7" onclick="conce('c_7')" /></li>
<li><img src="none.jpg" alt="3" width="100" height="100" id="c_8" onclick="conce('c_8')" /></li>
</ul>
</div>
<script type="text/javascript">
var card_c = 0; //数字が表示されているimgの数
var card_first; //altの数
var card_second; //altの数
var click_first; //開けた場所1
var click_second; //開けた場所2
function conce(aaa){ //クリックで無地に数字を表示
var imgId = document.getElementById(aaa);//クリックしたimgのid
if(card_c=0){ //1枚目
imgId.src = imgId.alt+".jpg";
card_c++;
card_first = imgId.alt;
click_first=aaa;
}else{//2枚目
imgId.src = imgId.alt+".jpg";
card_second = imgId.alt;
click_second=aaa;
if(card_first==card_second){
card_c=0;
}else{
document.getElementById(click_first).src="none.jpg";
document.getElementById(click_second).src="none.jpg";
card_c=0;
}
}
}
</script>
</body>
</html>
/---------------------------------------------------------/
流れとしては、
画像をクリック
→1回目は数字画像表示
→2回目は1回目と同じ数字がそろえばそのまま、違えば数字画像を元に戻す。
というようにしたいです。
よろしくお願いします。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- PHP 共通の処理をまとめる方法がわからないのでアドバイスお願いします。 1 2022/12/19 20:20
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- HTML・CSS CSSが効かずどのように指定すれば良いか分からないのでアドバイスお願い致します 2 2023/06/07 12:25
- HTML・CSS テキストを画面の真ん中に配置したいです。 2 2022/11/25 16:11
- JavaScript 画像の表示位置 3 2022/12/23 08:25
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- HTML・CSS flex の各子要素を横幅 100% にしたい 1 2022/09/22 21:25
- JavaScript jQueryで同じクラス名のものを別物として扱いたい 1 2022/06/17 14:14
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
【iOS及びAndroid】リンク画像...
-
【jQuery】2分割レイアウトで、...
-
自動でスライドし、伸び縮みす...
-
アコーディオンメニューが開い...
-
Javascriptで画像のフェードイン
-
画像をフェードアウト&フェー...
-
MAX関数を使ってからLEFT JOIN...
-
JSPでの画像ファイル表示
-
javascriptテキストBOX色を元に...
-
連番画像「次へ」「前へ」で、...
-
中心を軸にくるくる回るjQuery ...
-
MFCで画像を表示させているので...
-
大量のチェックボックス状態取...
-
リンク先がそれぞれ別の画像の...
-
htmlとcssに関する質問です
-
window.openで値の渡し方を教え...
-
【javascript で動的に a タグ...
-
jQueryで同じクラス名のものを...
-
ボタンをクリックした時に、キ...
-
javascriptで複数の画像をラン...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
Slick.jsのオプションrtlについて
-
同一ページ内の複数のタグに同...
-
【jQuery】2分割レイアウトで、...
-
キャラクターがぴょこんと飛び...
-
画像をフェードアウト&フェー...
-
jqueryのプラグインslickの画像...
-
html5に変えるとスライドショー...
-
Javaスクリプトで画像を縦にス...
-
javascriptで文字サイズの変更
-
jQueryでタブ、スライダーを使...
-
high slideをFC2ブログで
-
ご教授ください。
-
チェックボックスと画像切替の連動
-
jQueryのclickイベントハンドラ
-
Firefoxとクロームでフェードイ...
-
神経衰弱 順番に裏返し
-
アコーディオンメニューが開い...
-
【iOS及びAndroid】リンク画像...
-
fontsize.jsでhtmlの大中小の設...
-
javascript src書き換え
おすすめ情報