@p_sposted at 2024-04-23

click(event)による色反転について

Q&A

Closed

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

2Answer

@nak435 posted at 2024-04-23

div??を定義していますか？
HTMLの全体のソースコードをコードブロックに貼ってもらえますか。

0Like

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>

@nak435
clickという関数名が問題のようです。すべてclick_divとかに置換したら、動きました。
Javascriptのバージョンが上がって、clickという名前が衝突したのかも知れません。

@nak435

追伸；

スペルミスがありますね。（大文字と小文字は区別されます）

      if(e){
-         color = e.style.backgroundcolor;
+         color = e.style.backgroundColor;
          e.style.backgroundColor = (color ==  'blue' ? 'yellow' : 'blue');
      }

@Verclene posted at 2024-04-23

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

0Like

Comments

@p_s
Questioner
ご指摘いただきありがとうございました。
またリファレンスも大変参考になりました。
今後の励みにさせていただきます。

Are you sure you want to delete the question?

click(event)による色反転について

click(event)による色反転について

参考動画

2Answer

Comments

Comments

Your answer might help someone💌