• 締切済み

このコードは問題ないでしょうか。

javascriptを学んでいます。 練習のために下記のコードを自分なりに試行錯誤して作りました。 ちゃんと動くようになりましたが、自己流で修正を繰り返したので正しくない部分があると思います。 また、imgタグのそれぞれにidを付けて区別しています。 idを付けずにやる方が効率的で良いと思うのですが、実現することができず、 仕方なくidを全て付けて妥協しました。 改善点をご指摘して頂けると嬉しいです。ご教示をお願いいたします。 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>画像の切替とおすすめの組合せ</title> <style type="text/css"> #kkkkkk { width: 300px; position: relative; } #kkkkkk img { position: absolute; top:0; left: 0; } </style> <script type="text/javascript"> function aaa(evt){ var t = evt.target || evt.srcElement; var tid = t.id; var tag = t.parentNode.getElementsByTagName("img"); var kkkkkk = document.getElementById('kkkkkk'); if(t.nodeName != "IMG") return; for(i=0; node=kkkkkk.children[i++];){ if(node.tagName != "IMG") continue; if(node.id == tid.replace(/_|[0-4]/g,"")){ node.src = t.id+".jpg"; } } } function rrrrr(a,b,c){ var ta = document.getElementById('testA'); var tb = document.getElementById('testB'); var tc = document.getElementById('testC'); ta.src = "testA_"+a+".jpg"; tb.src = "testB_"+b+".jpg"; tc.src = "testC_"+c+".jpg"; } </script> </head> <body> <div> <img id="testA_0" src="testA_0.jpg" width="30" alt="" onclick="aaa(event);" /> <img id="testA_1" src="testA_1.jpg" width="30" alt="" onclick="aaa(event);" /> <img id="testA_2" src="testA_2.jpg" width="30" alt="" onclick="aaa(event);" /> <img id="testA_3" src="testA_3.jpg" width="30" alt="" onclick="aaa(event);" /> <br /> <img id="testB_0" src="testB_0.jpg" width="30" alt="" onclick="aaa(event);" /> <img id="testB_1" src="testB_1.jpg" width="30" alt="" onclick="aaa(event);" /> <br /> <img id="testC_0" src="testC_0.jpg" width="30" alt="" onclick="aaa(event);" /> <img id="testC_1" src="testC_1.jpg" width="30" alt="" onclick="aaa(event);" /> <img id="testC_2" src="testC_2.jpg" width="30" alt="" onclick="aaa(event);" /> </div> <form> <input type="button" value="おすすめ画像の組み合わせ　その１" onclick="rrrrr(0,0,2)" /><br /> <input type="button" value="おすすめ画像の組み合わせ　その２" onclick="rrrrr(3,1,0)" /><br /> <input type="button" value="おすすめ画像の組み合わせ　その３" onclick="rrrrr(2,1,1)" /><br /> </form> <div id="kkkkkk"> <img width="10" src="0.jpg" style="z-index:2;" id="testA" name="testA" alt="" /> <img width="20" src="1.jpg" style="z-index:1;" id="testB" name="testB" alt="" /> <img width="30" src="2.jpg" style="z-index:0;" id="testC" name="testC" alt="" /> </div> </body> </html>

みんなの回答

回答No.6

あ～やっちまったな～ >rrrrr ([[2,0,1], [3,1,2],[0,0,1]][Number(t.name)||0]) rrrrr.apply (null, [[2,0,1], [3,1,2],[0,0,1]][Number(t.name)||0]); ごめんなさい。訂正でした。

kiseki777
質問者

お礼

直した後のスクリプトをのせるのを忘れていました。 <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <title>画像の切替とおすすめの組合せ</title> <style type="text/css"> #kkkkkk { width: 300px; position: relative; } #kkkkkk img { position: absolute; top:0; left: 0; } </style> </head> <body> <div id="ggggg"> <img id="testA_0" name="testA_0" src="testA_0.jpg" width="30" alt="A画像0" /> <img id="testA_1" name="testA_1" src="testA_1.jpg" width="30" alt="A画像1" /> <img id="testA_2" name="testA_2" src="testA_2.jpg" width="30" alt="A画像2" /> <img id="testA_3" name="testA_3" src="testA_3.jpg" width="30" alt="A画像3" /> <br /> <img id="testB_0" name="testB_0" src="testB_0.jpg" width="30" alt="B画像0" /> <img id="testB_1" name="testB_1" src="testB_1.jpg" width="30" alt="B画像1" /> <br /> <img id="testC_0" name="testC_0" src="testC_0.jpg" width="30" alt="C画像0" /> <img id="testC_1" name="testC_1" src="testC_1.jpg" width="30" alt="C画像1" /> <img id="testC_2" name="testC_2" src="testC_2.jpg" width="30" alt="C画像2" /> </div> <form action="GET" name="fff"> <input type="button" name="1" value="おすすめ画像の組み合わせ　その１" /><br /> <input type="button" name="2" value="おすすめ画像の組み合わせ　その２" /><br /> <input type="button" name="3" value="おすすめ画像の組み合わせ　その３" /><br /> </form> <div id="kkkkkk"> <img width="10" src="0.jpg" style="z-index:2;" id="testA" name="testA" alt="切替後画像A" /> <img width="20" src="1.jpg" style="z-index:1;" id="testB" name="testB" alt="切替後画像B" /> <img width="30" src="2.jpg" style="z-index:0;" id="testC" name="testC" alt="切替後画像C" /> </div> <script type="text/javascript"> var ggg = document.getElementById('ggggg'); var frm = document.fff; if (document.addEventListener){ ggg.addEventListener('click', aaa, false); frm.addEventListener('click', bbb, false); } else if (document.attachEvent){ ggg.attachEvent('onclick', aaa); frm.attachEvent('onclick', bbb); } function aaa(evt){ var t = evt.target || evt.srcElement; if(t.nodeName != "IMG") return; var rst = /^(test[A-C])_(\d)$/.exec (t.id); var kkkkkk = document.getElementById('kkkkkk'); var i = 0, c = kkkkkk.childNodes, node; while (node = c[i++]) { if(node.tagName != "IMG") continue; if (node.id == rst.slice(1,2)) { node.src = t.id+".jpg"; } } } function bbb(evt) { var t = evt.target || evt.srcElement; switch(t.name){ case "1": rrrrr(2,0,1); break; case "2": rrrrr(3,1,2); break; case "3": rrrrr(0,0,1); break; default: return; } } function rrrrr(a,b,c){ var A = [ document.getElementById ('testA'), document.getElementById ('testB'), document.getElementById ('testC') ]; for(var i = 0, I = arguments.length; i < I; i++){ A[i].src = A[i].id + '_' + arguments[i] + '.jpg'; } } </script> </body> </html>

回答No.5

いつもながら追記 >画面上のどこをクリックしても実行してしまう まさかとは思うけど、今時のPCが処理できないほど高速に連打できるとでも？ 数ステップでスルーできるんだし・・・ onclick をそこいらじゅうに、付けまくっているよりコードよりは・・・

回答No.4

一寸、今日はじっくり見る余裕がありません。 >kkkkkkが存在しないといったエラーが出てしまいます。必ず読まれているはず 読まれているはずなら、エラーにならない訳で・・・ スクリプトが実行されている時にはまだ、head の中であり、body は読み込まれていませんよ。 なので、私はいつも </body> の直前にスクリプトを書いています。 document にイベントを取り付けるのは、 head の中でも　ok ですよね。 body を読み込まなくたって document は、存在するであろうから・・・ -- node.ownerDocument -- switch(t.name){ これは文字列 case 1: これは数値。勝手に変換してくれるかもしれないけど意識してね。よくやる。指摘される（打たれる＆凹む） rrrrr ([[2,0,1], [3,1,2],[0,0,1]][Number(t.name)||0]); // こんなことはしないようにね。^^; -- 関数 aaa のなかで、変更すべき id を取得できているのに、なぜループする！？ -- jpeg って、重ねて表示できたっけ？ 実は、xhtml ってよく知らない。 だからNS付きを調べてね。 -- var A = [ 　document.getElementById ('testA'), 　document.getElementById ('testB'), 　document.getElementById ('testC') ]; function rrrrr () { 　for (var i = 0, I = arguments.length; i < I; i++) 　　A[i].src = A[i].id + '_' + arguments[i] + '.jpg'; } // 画像がキャッシュに納まるならそれはそれで -- もう１００ポイントくらい・・・

回答No.3

追記 > htmlの部分がすっきり addEventListener に指定する関数を、いきなり aaaa にするのではなく、間に適当な関数を置きます。 その関数で、img 要素なのか input 要素なのかを判断して aaaa もしくは rrrrr を呼び出すようにするのはどうですか？ input#button 要素にも id をふって置けば、rrrrr の引数も・・・ 必要とあらば、その関数の中で evt.type を分岐点とすれば、museover だとか mouseout も１つの関数で済ませられます。 それを、「ハンドラー」と呼ぶか「リスナー」と呼ぶかは何気に迷いますが。 > style="z-index:2;" これはスタイルシート行きでしょう。ここにも id がついているのですから。

kiseki777
質問者

お礼

再度の指摘ありがとうございます。とても参考になります。 var　kkkkkkを最初に移動していますが、これは画面上のどこをクリックしても実行してしまうのが何か影響がありそうで、特定の場所をクリックしない限り実行されないようにしたくてこのようにしました。しかし、kkkkkkが存在しないといったエラーが出てしまいます。必ず読まれているはずなので、エラーになる原因が分かりません。 HTMLの部分を直しました。スタイルシート行きの要素は実践で行動に移します。 <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <title>画像の切替とおすすめの組合せ</title> <style type="text/css"> #kkkkkk { width: 300px; position: relative; } #kkkkkk img { position: absolute; top:0; left: 0; } </style> <script type="text/javascript"> var kkkkkk = document.getElementById('kkkkkk'); var tuikaID = document.getElementById('tuikaID'); if (document.addEventListener){ tuikaID.addEventListener('click', bbb, false); kkkkkk.addEventListener('click', bbb, false); } else if (document.attachEvent){ tuikaID.addEventListener('click', bbb, false); kkkkkk.attachEvent('onclick', bbb); } function bbb(evt) { var t = evt.target || evt.srcElement; var testID1 = /^(test[A-C])_(\d)$/.test(t.id); var testID2 = /^test[A-C]$/.test(t.id); alert(testID1); if(t.nodeName == "IMG" && testID1) { aaa(evt); }else if(t.nodeName == "INPUT" && testID2){ switch(t.name){ case 1: rrrrr(2,0,1); break; case 2: rrrrr(3,1,2); break; case 3: rrrrr(0,0,1); break; } }else{ return; } } function aaa(evt){ var t = evt.target || evt.srcElement; //var kkkkkk = document.getElementById('kkkkkk');←最初に移動 var rst = /^(test[A-C])_(\d)$/.exec (t.id); var i = 0, c = kkkkkk.childNodes, node; while (node = c[i++]) { if(node.tagName != "IMG") continue; if (node.id == rst.slice(1,2)) { node.src = t.id+".jpg"; } } } function rrrrr(a,b,c){ var ta = document.getElementById('testA'); var tb = document.getElementById('testB'); var tc = document.getElementById('testC'); ta.src = "testA_"+a+".jpg"; tb.src = "testB_"+b+".jpg"; tc.src = "testC_"+c+".jpg"; } </script> </head> <body> <div id="tuikaID"> <img id="testA_0" name="testA_0" src="testA_0.jpg" width="30" alt="A画像0" /> <img id="testA_1" name="testA_1" src="testA_1.jpg" width="30" alt="A画像1" /> <img id="testA_2" name="testA_2" src="testA_2.jpg" width="30" alt="A画像2" /> <img id="testA_3" name="testA_3" src="testA_3.jpg" width="30" alt="A画像3" /> <br /> <img id="testB_0" name="testB_0" src="testB_0.jpg" width="30" alt="B画像0" /> <img id="testB_1" name="testB_1" src="testB_1.jpg" width="30" alt="B画像1" /> <br /> <img id="testC_0" name="testC_0" src="testC_0.jpg" width="30" alt="C画像0" /> <img id="testC_1" name="testC_1" src="testC_1.jpg" width="30" alt="C画像1" /> <img id="testC_2" name="testC_2" src="testC_2.jpg" width="30" alt="C画像2" /> </div> <form action="GET"> <input type="button" name="1" value="おすすめ画像の組み合わせ　その１" /><br /> <input type="button" name="2" value="おすすめ画像の組み合わせ　その２" /><br /> <input type="button" name="3" value="おすすめ画像の組み合わせ　その３" /><br /> </form> <div id="kkkkkk"> <img width="10" src="0.jpg" style="z-index:2;" id="testA" name="testA" alt="切替後画像A" /> <img width="20" src="1.jpg" style="z-index:1;" id="testB" name="testB" alt="切替後画像B" /> <img width="30" src="2.jpg" style="z-index:0;" id="testC" name="testC" alt="切替後画像C" /> </div> </body> </html> ちなみに、 /^(test[A-C])_(\d)$/.exec (t.id) /に囲まれた部分が正規表現 ()に囲まれた部分はグループを表し、 ^は先頭にマッチ、$は最後がマッチを意味し、 ^(A)_(B)$はAグループから始まり、_が間に入り、Bグループで終わる文字。 exec(xxx)はxxxという文字が正規表現文字列に含まれるかを調べ、 返り値は配列に。 [0] : マッチした文字列・・・testA_0とか [1] : 1番目のグループ部分(マッチ結果)・・・testA [2] : 2番目のグループ部分(マッチ結果)・・・0 sliceは配列や文字列を抜き取るメソッド 上記のexecの返り値.slice(1)は、testA,0になる。 slice(1,2)と1個ズレでやるとtestAになる。 ですね。勉強になります。ありがとうございます。

回答No.2

ちょっと勘違いをしていましたね。これが次のヒントになるかな？ 文法チェッカーにかけました？ form 要素には action 属性は必須とか・・・ function aaa(evt){ 　var t = evt.target || evt.srcElement; 　var rst; 　if (rst = /^(test[A-C])_(\d)$/.exec (t.id)) { 　　alert (rst.slice(1)); 　} }

回答No.1

こんにちは。 いきなり＆ところで、これは是非とも XHTML でなければならないのでしょうか？ まずは、基本 http://openlab.ring.gr.jp/k16/htmllint/htmllint.html でチェック。 カテゴリが Javascript なので本題はプログラムコードですよね。 他の回答で「ファイルを１つにまとめるべき」と書いておきながら、ここでは分けるべきとついでに愚申いたします。 関数 aaa の呼び出し元が、onclick からですが、document から addEventListener などで呼び出すようにしてはどうですか？ その関数の中で使われている document は、 変数 t から辿ってみては？ ちょっと getElementsByTagNameNS とかを調べるとよいかも。 変数 i と node が、var を付けていない為、グローバル変数です。 ＞ for(i=0; node=kkkkkk.children[i++];){ ループの中で毎回 children を呼び出すくらいなら for の手前で var i = 0, c = document.getElementById('kkkkkk').childNodes, node; while (node = c[i++]) { だとか・・・ あっ！ children ? この正規表現も微妙。 ＞ if(node.id == tid.replace(/_|[0-4]/g,"")){ 試していませんが、 /test[A-C]_\d\.jpg$/.test (node.id) これって見せたいものが重なって表示されません？ 隠すためなら node.style.display を弄るとか？ ｄｉｖ要素の中に、img 要素がただ並んでいるのはどうかなぁ？ 文法は間違ってないのだけれど・・・ >idを付けずにやる方が効率的 ある方に「極端な話、全部に id をつければ・・・」と、おっしゃっていたのを思い出しました。 貴方の方法が効率的に見える、今日この頃。 （夜も明けた。）

kiseki777
質問者

お礼

ありがとうございます。 指摘して頂いたことを取り入れてみました。 addEventListenerを使ったことでhtmlの部分がすっきりしました。 addEventListenerは、aaa(event)とできないのでクリック先を特定できないと思ったのですが、aaaとしても自動的にaaa(event)の形として機能するのですね。 >ループの中で毎回 children を呼び出すくらいなら for の手前で childrenは読みだすたびに負荷が大きくかかるからでしょうか。 >/test[A-C]_\d\.jpg$/.test (node.id) 下記のようにためしてみたのですが、機能しませんでした。 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>画像の切替とおすすめの組合せ</title> <style type="text/css"> #kkkkkk { width: 300px; position: relative; } #kkkkkk img { position: absolute; top:0; left: 0; } </style> <script type="text/javascript"> if (document.addEventListener){ document.addEventListener('click', aaa, false); } else if (document.attachEvent){ document.attachEvent('onclick', aaa); } function aaa(evt){ var t = evt.target || evt.srcElement; var tid = t.id; var tag = t.parentNode.getElementsByTagName("img"); var kkkkkk = document.getElementById('kkkkkk'); if(t.nodeName != "IMG") return; var i = 0, c = kkkkkk.childNodes, node; while (node = c[i++]) { if(node.tagName != "IMG") continue; //if(/test[A-C]_\d\.jpg$/.test(node.id)){ if(node.id == tid.replace(/_|[0-4]/g,"")){ node.src = t.id+".jpg"; } } } function rrrrr(a,b,c){ var ta = document.getElementById('testA'); var tb = document.getElementById('testB'); var tc = document.getElementById('testC'); ta.src = "testA_"+a+".jpg"; tb.src = "testB_"+b+".jpg"; tc.src = "testC_"+c+".jpg"; } </script> </head> <body> <div> <img id="testA_0" src="testA_0.jpg" width="30" alt="" /> <img id="testA_1" src="testA_1.jpg" width="30" alt="" /> <img id="testA_2" src="testA_2.jpg" width="30" alt="" /> <img id="testA_3" src="testA_3.jpg" width="30" alt="" /> <br /> <img id="testB_0" src="testB_0.jpg" width="30" alt="" /> <img id="testB_1" src="testB_1.jpg" width="30" alt="" /> <br /> <img id="testC_0" src="testC_0.jpg" width="30" alt="" /> <img id="testC_1" src="testC_1.jpg" width="30" alt="" /> <img id="testC_2" src="testC_2.jpg" width="30" alt="" /> </div> <form> <input type="button" value="おすすめ画像の組み合わせ　その１" onclick="rrrrr(0,0,2)" /><br /> <input type="button" value="おすすめ画像の組み合わせ　その２" onclick="rrrrr(3,1,0)" /><br /> <input type="button" value="おすすめ画像の組み合わせ　その３" onclick="rrrrr(2,1,1)" /><br /> </form> <div id="kkkkkk"> <img width="10" src="0.jpg" style="z-index:2;" id="testA" name="testA" alt="" /> <img width="20" src="1.jpg" style="z-index:1;" id="testB" name="testB" alt="" /> <img width="30" src="2.jpg" style="z-index:0;" id="testC" name="testC" alt="" /> </div> </body> </html>

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • javascript setTimeout

    javascript初心者ですが、練習を兼ねて神経衰弱を作っています。 setTimeoutを使って「めくったカードが違う場合、少し時間を経過させてから元に戻す」 という動作を作りたいのですが、うまくいきません。 /--------------------------------------------------------/ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <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; //開けた場所１ var click_second; //開けた場所2 function conce(aaa){ //クリックで無地に数字を表示 var imgId = document.getElementById(aaa);//クリックしたimgのid if(card_c==0){ //１枚目 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> /----------------------------------------------/ どこが間違っているのでしょうか。 よろしくお願いします。

  • javascript 神経衰弱

    javascriptを勉強し始めて間もない初心者です。 練習として神経衰弱を作ろうとしているのですが、うまく動いてくれません。 どこが間違っているのでしょうか。 /---------------------------------------------------------/ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <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; //開けた場所１ var click_second; //開けた場所2 function conce(aaa){ //クリックで無地に数字を表示 var imgId = document.getElementById(aaa);//クリックしたimgのid if(card_c=0){ //１枚目 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> /---------------------------------------------------------/ 流れとしては、 画像をクリック →１回目は数字画像表示 →2回目は1回目と同じ数字がそろえばそのまま、違えば数字画像を元に戻す。 というようにしたいです。 よろしくお願いします。

  • 神経衰弱　順番に裏返し

    javascript初心者ですが、練習のために神経衰弱を作っています。 簡単な骨組みはでき、要素を加えている最中なのですが、今足そうと思っている要素の書き方がわかりません。 足そうと思っているのは、 「全てカードをそろえたあと、順番にカードをひっくり返して、元に戻す」 という要素です。 setTimeoutを使って0.5秒ごとにカードを返すというコードを書いているつもりなのですが、うまくいきません。どうすればいいのでしょうか。 /-------------------------------------------------------------------------/ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <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; //１枚目 var card_first; //altの数 var card_second; //altの数 var click_first; //開けた場所１ var click_second; //開けた場所2 var fullOpen = 0; //ワンペアで1追加　4でクリア function conce(aaa){ //クリックで無地に数字を表示 var imgId = document.getElementById(aaa);//クリックしたimgのid switch(card_c){ case 0: imgId.src = imgId.alt+".jpg"; card_c++; card_first = imgId.alt; click_first=aaa; break; case 1: imgId.src = imgId.alt+".jpg"; card_second = imgId.alt; click_second=aaa; card_c++; if(card_first==card_second){//揃ったら card_c=0; fullOpen++; }else{//揃わなかったら function bunki(){ document.getElementById(click_first).src="none.jpg"; document.getElementById(click_second).src="none.jpg"; card_c=0;//setTimeoutのあとだと待つ必要があるためココ } setTimeout(bunki,500);//0.5秒後閉じる } break; default: break; }//switch //全部そろえた時のアクション if(fullOpen==4){ alert("complete!"); //0.5秒ごとに裏返す 8回繰り返す for(var j=0;j<8;j++){ function resetAll(){ var i = 0; if(i<8){ document.getElementById('c_'+(i+1)).src="none.jpg"; i++; } }//resetAll setTimeout(resetAll,500); }//for fullOpen=0; }//if(fullOpen==4) }//function conce(aaa) </script> </body> </html> /-------------------------------------------------------------------------------/ よろしくお願いします。

  • javascript　神経衰弱　表に返す時間

    javascript初心者です。 練習で神経衰弱を作っていますが、わからないところがあるので質問させていただきます。 以下のような神経衰弱のスクリプトを書き、一応単純な骨組みは出来て、機能を追加しているところです。 今追加しようとしているのは、 「２枚のカードを表にしたときの表示時間中（０．５秒）に３枚目をクリックできないようにする」 です。 連打してクリックすると、２枚の判定をしている最中に３枚目をクリックしてしまい、スクリプトがおかしくなります。 これを解消したいのですが、うまい方法が思いつきません。 アドバイスいただければと思います。 /--------------------------------------------------------------/ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <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; //１枚目 var card_first; //altの数 var card_second; //altの数 var click_first; //開けた場所１ var click_second; //開けた場所2 var fullOpen = 0; //ワンペアで1追加　4でクリア function conce(aaa){ //クリックで無地に数字を表示 var imgId = document.getElementById(aaa);//クリックしたimgのid if(card_c==0){ //１枚目 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; fullOpen++; }else{//揃わなかったら function bunki(){ document.getElementById(click_first).src="none.jpg"; document.getElementById(click_second).src="none.jpg"; } setTimeout(bunki,500);//0.5秒後閉じる card_c=0; } } //全部そろえた時のアクション if(fullOpen==4){ alert("complete!"); for(i=0;i<8;i++){ document.getElementById('c_'+(i+1)).src="none.jpg" } fullOpen=0; } } </script> </body> </html> /-------------------------------------------------------------/ よろしくおねがいします。

  • javascript src書き換え

    javascript 初心者なのですが、質問させてください。 クリックした画像を3.jpgに書き換えるというコードを書いたのですが、うまく動きません。 どこが違間違っているのでしょうか。 /-------------------------------------------------------------/ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <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="100px" height="100px" id="c_1" onclick="conce(c_1)" /></li> <li><img src="none.jpg" alt="1" width="100px" height="100px" id="c_2" onclick="conce(c_2)" /></li> <li><img src="none.jpg" alt="4" width="100px" height="100px" id="c_3" onclick="conce(c_3)" /></li> <li><img src="none.jpg" alt="4" width="100px" height="100px" id="c_4" onclick="conce(c_4)" /></li> <li><img src="none_2.jpg" alt="" width="100px" height="100px" id="c_5"/></li> <li><img src="none.jpg" alt="2" width="100px" height="100px" id="c_6" onclick="conce(c_5)" /></li> <li><img src="none.jpg" alt="1" width="100px" height="100px" id="c_7" onclick="conce(c_6)" /></li> <li><img src="none.jpg" alt="2" width="100px" height="100px" id="c_8" onclick="conce(c_7)" /></li> <li><img src="none.jpg" alt="3" width="100px" height="100px" id="c_9" onclick="conce(c_8)" /></li> </ul> </div> <script type="text/javascript"> function conce(aaa){ document.getElementById("aaa").src = "3.jpg"; } </script> </body> </html> /-----------------------------------------------------------------------/ よろしくお願いします。

  • JavaScript - 月ごとに画像変化

    <script type="text/javascript"> <!-- var myimg = new Array(); myimg[0] = '<img src="a.jpg" alt="a.jpg" width="477" height="33">'; myimg[1] = '<img src="b.jpg" alt="b.jpg" width="477" height="33">'; myimg[2] = '<img src="c.jpg" alt="c.jpg" width="477" height="33">'; myimg[3] = '<img src="d.jpg" alt="d.jpg" width="477" height="33">'; myimg[4] = '<img src="e.jpg" alt="e.jpg" width="477" height="33">'; myimg[5] = '<img src="f.jpg" alt="f.jpg" width="477" height="33">'; myimg[6] = '<img src="g.jpg" alt="g.jpg" width="477" height="33">'; myimg[7] = '<img src="h.gif" alt="h.jpg" width="477" height="33">'; myimg[8] = '<img src="i.jpg" alt="i.jpg" width="477" height="33">'; myimg[9] = '<img src="j.jpg" alt="j.jpg" width="477" height="33">'; myimg[10] = '<img src="k.jpg" alt="k.jpg" width="477" height="33">'; myimg[11] = '<img src="l.jpg" alt="l.jpg" width="477" height="33">'; var mynow = new Date(); var mymonth = mynow.getMonth(); document.write("<center><img 'src="+myimg[mymonth ]+"'></center>"); // --></script> このようなものをHTML属性のBODY内に入れて、月ごとに画像を変化させるということを実現しています。 画像の変化自体はうまくいってますが、ブラウザの多くは [a.jpg]'> （"["と"]"は画像の端）という風に、右端に文字が出てしまいます。 試しに、2つの"'"を消せば []> という風に、画像が見つからない×印がついて表示も出来ません。 文字が出ないようにするにはどう対応するのでしょうか。 詳しい方アドバイスお願いします。 ちなみにJavascriptにこだわらず、月ごとに画像が変化できれば何でもいいです。

  • エラーが起きてしまいます

    アルバムページを作ろうと思っていたのですが どこが、どう間違っているのでしょうか？ 一応表示はできていると思うのですが… <HTML> <HEAD> <TITLE></TITLE> <SCRIPT language=javascript> var prevObj = null function chBorder(elem,color) { if(prevObj != null) { prevObj.style.borderColor = "#ffffff" } prevObj = elem elem.style.borderColor = color } </SCRIPT> </HEAD> <BODY> <TABLE> <TBODY> <TR> <TD> <IMG onclick="myImg1.src=this.src" src="1.jpg" width="60"> <IMG onclick="myImg1.src=this.src" src="2.jpg" width="60"> <IMG onclick="myImg1.src=this.src" src="3.jpg" width="60"> <IMG onclick="myImg1.src=this.src" src="4.jpg" width="60"> <IMG onclick="myImg1.src=this.src" src="5.jpg" width="60"> </TD> </TR> <TR> <TD align="center"> <IMG id="myImg1" src="0.jpg" width="300"> </TD> </TR> </TBODY> </TABLE> </BODY> </HTML>

  • ローカルでは問題なく動くがサーバーにupするとおかしくなるロールオーバー

    会社のhpを作成中です。 ロールオーバーをしたいという事で、メニューをjsでロールオーバーさせる事にしました。 javascriptは初心者です。 本を見て、コードを打ちました。 が、PC上では問題なく動くのですが、サーバーに乗せるとおかしくなります。 リストにマウスを乗せた状態にするとaltのテキストが表示されてしまうのです。 色々調べてみましたが、どうしても分かりません。 分かる方がおられたら是非教えてください。 xhmtl <ul id="nav"> <li><a href="news.html"><img src="image/news.gif" class="Hover" alt="更新情報" width="255" height="34" /></a></li> <li><a href="profile.html"><img src="image/profile.gif" class="Hover" alt="会社概要" width="255" height="34" /></a></li> <li><a href="works.html"><img src="image/works.gif" class="Hover" alt="営業種目" width="255" height="34" /></a></li> <li><a href="staff.html"><img src="image/staff.gif" class="Hover" alt="スタッフ" width="255" height="34" /></a></li> <li><a href="office.html"><img src="image/office.gif" class="Hover" alt="営業所" width="255" height="34" /></a></li> <li><a href="extra.html"><img src="image/extra_over.gif" class="Hover" alt="臨時情報" width="255" height="34" /></a></li> </ul> js //p = console.log; window.onload = function(){ var conf = { className : 'Hover', postfix : '_over' }; var imgNodeList = getElementsByClassName(conf.className); var node; for (var i=0, len=imgNodeList.length; i<len; i++) { node = imgNodeList[i]; node.originalSrc = node.src; node.rolloverSrc = node.originalSrc.replace(/(\.gif|\.jpg|\.png)/, conf.postfix+"$1"); preloadImage(node.rolloverSrc); node.onmouseover = function(){ this.src = this.rolloverSrc; }; node.onmouseout = function(){ this.src = this.originalSrc; }; } }; //クラス名によるエレメントノード配列取得 function getElementsByClassName(name){ var elements = []; var allElements = document.getElementsByTagName('*'); for (var i=0, len=allElements.length; i<len; i++) { if (allElements[i].className == name){ elements.push(allElements[i]); } } return elements; } //プリロード preloadedImages = []; function preloadImage(url){ var p = preloadedImages; var l = p.length; p[l] = new Image(); p[l].src = url; }

  • changeImgによる画像の入れ替え時のIEにおける不安定さ

    changeImgで画像を入れ替えたいのですが、 FireFoxでは問題ないのですが、 IEだと、画像が表示されない、半分だけ表示される、等の現象が発生してしまいます。 表示されないときに右クリックの画像を表示するにすると表示されます。 http://inoue.sub.jp/test/ ソースは ************************** function changeImg(iName,img){ document.images[iName].src=img; } ************************** <img height="344" border="0" width="230" name="tar01" id="tar01" alt="" src="img/01.jpg"/> <a onclick="changeImg('tar01','img/01.jpg');" onmouseout="changeImg('tar02','img/07.jpg')" onmouseover="changeImg('tar02','img/08.jpg');" href="javascript:void(0);"> <img height="83" border="0" width="50" name="tar02" id="tar02" alt="" src="img/07.jpg"/></a> <a onclick="changeImg('tar01','img/02.jpg');" onmouseout="changeImg('tar03','img/09.jpg')" onmouseover="changeImg('tar03','img/10.jpg');" href="javascript:void(0);"> <img height="83" border="0" width="50" name="tar03" id="tar03" alt="" src="img/09.jpg" class="pl5"/></a> になります。 何処がおかしいのでしょうか？どうぞよろしくお願いいたします。

  • JQUERY slideshowについて

    slide-show.jsについての質問です。 ホームページのトップイメージにスライドショーで３枚の写真を動かしています。 で、トップページの写真を９枚にして、左３枚・真ん中３枚・右３枚というふうに動かしたいです。 トップイメージの写真（幅900px）３枚を トップイメージの写真（幅300ｐｘ）×３を３枚スライドにする （意味不明ですか・・・） 下の#slideshow01を#slideshow02、#slideshow03に増やして、設置したら動きませんでした。 出来れば、右→真ん中→左がちょっと時差をつけてスライドして欲しいです。 写真の切り替えは、ＣＳＳのＺーindexを使っています。 現在のＨＴＭＬ <div id='slideshow01'> <!--スライドショーの３枚ここ！--> <img src="upimg/results/flash_1.jpg" alt="" width="300" height="400" /> <img src="upimg/results/flash_2.jpg" alt="" width="300" height="400" /> <img src="upimg/results/flash_3.jpg" alt="" width="300" height="400" /> <!--スライドショーの３枚終わり--> </div> 求めるＨＴＭＬ <div id='slideshow01'> <!--スライドショーの３枚ここ！--> <img src="upimg/results/flash_1.jpg" alt="" width="300" height="400" /> <img src="upimg/results/flash_2.jpg" alt="" width="300" height="400" /> <img src="upimg/results/flash_3.jpg" alt="" width="300" height="400" /> <!--スライドショーの３枚終わり--> </div> <div id='slideshow02'> <!--スライドショーの３枚ここ！--> <img src="upimg/results/flash_4.jpg" alt="" width="300" height="400" /> <img src="upimg/results/flash_5.jpg" alt="" width="300" height="400" /> <img src="upimg/results/flash_6.jpg" alt="" width="300" height="400" /> <!--スライドショーの３枚終わり--> </div> <div id='slideshow03'> <!--スライドショーの３枚ここ！--> <img src="upimg/results/flash_7.jpg" alt="" width="300" height="400" /> <img src="upimg/results/flash_8.jpg" alt="" width="300" height="400" /> <img src="upimg/results/flash_9.jpg" alt="" width="300" height="400" /> <!--スライドショーの３枚終わり--> </div> この　js　を使っています。 function slideSwitch() { var $active = $('#slideshow01 img.active'); if ( $active.length == 0 ) $active = $('#slideshow01 img:last'); var $next = $active.next().length ? $active.next() : $('#slideshow01 img:first'); $active.addClass('last-active'); $next.css({opacity: 0.0}) .addClass('active') .animate({opacity: 1.0}, 1000, function() { $active.removeClass('active last-active'); }); } $(function() { setInterval( "slideSwitch()", 4000 ); });

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する