div??を定義していますか？
HTMLの全体のソースコードをコードブロックに貼ってもらえますか。
Like!
click(event)による色反転について
click(event)による色反転について
VScodeでLihtsOutゲームを作成しています。
現在、click(event)でマスの色を反転させる機能を設定中なのですが、反転しません。特に２点の回答をいただければと思います。
1.反転可能にしたい。
2.構文ミスなどがあれば指摘して欲しい。
（3.関数など、代替案があれば教えて欲しい。）
初歩的な質問ですが、ご回答いただけますと幸いです。
宜しくお願いいたします。
//マウスがクリックされた時
function toggle(x,y){
e = document.getElementById('div'+y+x);
if(e){
color = e.style.backgroundcolor;
e.style.backgroundColor = (color == 'blue' ? 'yellow' : 'blue');
}}
function click(event){
id = event.target.id;
a = id.match(/(.)(.)$/); //matchの定義は？
y = Number(a[1]);
x = Number(a[2]);
toggle(x,y);
toggle(x-1,y);
toggle(x,y-1);
toggle(x+1,y);
toggle(x,y+1);
}
参考動画
コードの参考にさせていただいた動画です。
解決の参考にしていただけますと幸いです。
https://www.youtube.com/watch?v=5e40QHi-vUg
0
2Answer
0
Comments
@p_s
Questionerご連絡、ありがとうございます。
下記の内容です。index.html<html> <head> <meta http-eguiv="Cntent-Type" content="text/html; charset-utf-8"> <title></title> <script type="text/javascript"> //マウスがクリックされた時 function toggle(x,y){ e = document.getElementById('div'+y+x); if(e){ color = e.style.backgroundcolor; e.style.backgroundColor = (color == 'blue' ? 'yellow' : 'blue'); }} function click(event){ id = event.target.id; a = id.match(/(.)(.)$/); //matchの定義は？ y = Number(a[1]); x = Number(a[2]); toggle(x,y); toggle(x-1,y); toggle(x,y-1); toggle(x+1,y); toggle(x,y+1); } </script> <style type="text/css"> div { width:80px; height:80px; margin:4px; background-color:yellow; float:left; } </style> </head> <body> <div id='div11' onclick='click(event)'></div> <div id='div12' onclick='click(event)'></div> <div id='div13' onclick='click(event)'></div> <div id='div14' onclick='click(event)'></div> <div id='div15' onclick='click(event)'></div> <br clear='all'> <div id='div21' onclick='click(event)'></div> <div id='div22' onclick='click(event)'></div> <div id='div23' onclick='click(event)'></div> <div id='div24' onclick='click(event)'></div> <div id='div25' onclick='click(event)'></div> <br clear='all'> <div id='div31' onclick='click(event)'></div> <div id='div32' onclick='click(event)'></div> <div id='div33' onclick='click(event)'></div> <div id='div34' onclick='click(event)'></div> <div id='div35' onclick='click(event)'></div> <br clear='all'> <div id='div41' onclick='click(event)'></div> <div id='div42' onclick='click(event)'></div> <div id='div43' onclick='click(event)'></div> <div id='div44' onclick='click(event)'></div> <div id='div45' onclick='click(event)'></div> <br clear='all'> <div id='div51' onclick='click(event)'></div> <div id='div52' onclick='click(event)'></div> <div id='div53' onclick='click(event)'></div> <div id='div54' onclick='click(event)'></div> <div id='div55' onclick='click(event)'></div> <br clear='all'> //引用元:増井俊之.5分で作るAndroidアプリケーション.2011.ニコニコ動画 https://sp.nicovideo.jp/watch/sm13372778?ref=nicoiphone_watch_ellipsismenu_browser </body> </html>clickという関数名が問題のようです。すべてclick_divとかに置換したら、動きました。
Javascriptのバージョンが上がって、clickという名前が衝突したのかも知れません。追伸；
スペルミスがありますね。（大文字と小文字は区別されます）
if(e){ - color = e.style.backgroundcolor; + color = e.style.backgroundColor; e.style.backgroundColor = (color == 'blue' ? 'yellow' : 'blue'); }
color = e.style.backgroundcolor
ここがbackgroundcolorになっているために動いていないと思われます(大文字小文字を区別する).linterを使いましょう.
当たり前ですが,イベントリスナーでclick関数を適当に登録してやらないと一切動きませんので念のため.
そのほかは割とどうでもいいことではありますが(よくはない),参考にされているのは13年も前の動画であり,そのくらい古いとHTMLやJavaScriptの書き方も相当古い標準に基づいていますので,丸々プロダクトの参考にするのは控えてください.
onclick属性の使用は推奨されません.特にWindow.eventオブジェクトは使ってはいけません.できる限りaddEventListnerを使用するのがよいです.
https://developer.mozilla.org/ja/docs/Web/HTML/Attributes#%E3%82%A4%E3%83%99%E3%83%B3%E3%83%88%E3%83%8F%E3%83%B3%E3%83%89%E3%83%A9%E3%83%BC%E5%B1%9E%E6%80%A7
https://developer.mozilla.org/ja/docs/Web/API/Window/event
Like!
Comments
@p_s
Questionerご指摘いただきありがとうございました。
またリファレンスも大変参考になりました。
今後の励みにさせていただきます。