javascript初心者ですが、練習を兼ねて神経衰弱を作っています。
setTimeoutを使って「めくったカードが違う場合、少し時間を経過させてから元に戻す」
という動作を作りたいのですが、うまくいきません。
/--------------------------------------------------------/
<!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{
setTimeout("bunki()",500);
card_c=0;
}
function bunki(){
document.getElementById(click_first).src="none.jpg";
document.getElementById(click_second).src="none.jpg";
}
}
}
</script>
</body>
</html>
/----------------------------------------------/
どこが間違っているのでしょうか。
よろしくお願いします。
No.1ベストアンサー
- 回答日時:
bunki がグローバルスコープに存在しないため、第一引数を eval できずに失敗しています
誤: setTimeout("bunki()", 500);
正: setTimeout(bunki, 500);
このあたりのスコープに関する説明は少々敷居の高いので省略しますが、
そもそも(誤)の記法はすでに非奨励なので、
この機会に(正)の記法を覚えていただければ幸いです。
参考) https://developer.mozilla.org/ja/docs/Web/API/wi …
余談ではありますが...
二枚目をめくった後に0.5秒以内に次のカードをめくるとバグる問題が残っています。ご注意ください
この回答への補足
お返事ありがとうございます
非推奨だったんですね。
以後使わないようにします。
修正後、fireBugで確認したのですが、
ReferenceError: bunki is not defined
setTimeout(bunki,500);
と表示され、機能してくれません。
まだどこか間違っているのでしょうか。
よろしければ、もう一度お答えいただけると幸いです。
すいません、解決しました。
function bunki(){
document.getElementById(click_first).src="none.jpg";
document.getElementById(click_second).src="none.jpg";
}
を
setTimeout(bunki,500);
の前に持ってきたらちゃんと動作しました。
ありがとうございました。
お探しの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ランキング
-
Javascriptを使用したスライド...
-
【jQuery】2分割レイアウトで、...
-
Slick.jsのオプションrtlについて
-
MAX関数を使ってからLEFT JOIN...
-
【HTML、VBScript】HTAでのイベ...
-
タブで開いてさらにタブ内をア...
-
1枚の画像をクリックすると複数...
-
JavaScriptで変更した属性の元...
-
1枚の画像をクリックして複数の...
-
【javascript で動的に a タグ...
-
error LNK2019 未解決のシンボ...
-
console.log結果をhtmlで表示し...
-
c++std::string型をTCHARに変換...
-
window.openで値の渡し方を教え...
-
JavaScriptとチェックボックス...
-
読み込んだQRコードをフォーム...
-
jQueryで同じクラス名のものを...
-
dblclickでdiv要素を一回だけ作...
-
WSHでクリップボードにイメージ...
-
css固定したフッターが本文と重...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
Slick.jsのオプションrtlについて
-
【jQuery】2分割レイアウトで、...
-
html5に変えるとスライドショー...
-
【iOS及びAndroid】リンク画像...
-
アコーディオンメニューが開い...
-
画像をフェードアウト&フェー...
-
jqueryのプラグインslickの画像...
-
横並びの画像を3枚時間差でフェ...
-
CSSでマウスオーバーした画像を...
-
[jQuery]bxSlider 一番最後と...
-
神経衰弱 順番に裏返し
-
チェックボックスと画像切替の連動
-
一定時間ごとに画像を切り替え...
-
複数の要素へ appendchild でき...
-
jqueryサブウィンドウにて画像...
-
Firefoxとクロームでフェードイ...
-
折り畳みメニューを使った場合...
-
fontsize.jsでhtmlの大中小の設...
-
jsでグリッドデザインのサムネ...
-
javascript 神経衰弱
おすすめ情報