- ベストアンサー
javascriptでクリックするごとにセルの色を変えたい
javascript初心者です。 現在テーブルの作成を行っており、マウスを乗せたら色が変わるやクリックして指定の色に変えるなどは実現いたしましたが、クリックするごとに色が変わる(赤→青→赤→青・・・など)ものができません。 現在下記のように作っていますがエラーが起きてしまいます。 どのように直せばよいかご教授願います。 <script type="text/javascript"> <!-- var color1 = "#ff0000"; var color2 = "#0000ff"; function onC(obj){ if (obj.style.backgroundColor = color1){ obj.style.backgroundColor = color2; } else if (obj.style.backgroundColor = color2){ obj.style.backgroundColor = color1; } } //--> </script> <body> <table border="1" cellpadding=20> <tr> <td onClick = "onC(this)"><br> </td> </tr> </table> </body>
- iec1128
- お礼率43% (70/161)
- JavaScript
- 回答数5
- ありがとう数6
- みんなの回答 （5）
- 専門家の回答
質問者が選んだベストアンサー
styleのbackgroundColorは <td style="background-color:～"> みたいな記述がなければ "style"も"backgroundColor"も存在しないのでいきなり比較はできない。 (ヘッダ部や外部スタイルシートで指定した色はそのオブジェクトのstyleプロパティではない。) 標準的なブラウザならgetComputedStyle、IEならcurrentStyleで結果的にどう設定されているかを読み出す事はできるけど、ちょっと面倒なのでここではパス。 とにかくエラーが起きないようにするには、"style"がある事を確認してから比較する。 ついでに、戻すときは元の色を上書きするのではなく設定した色を削除すればいい。 というわけで以下サンプル。 <html> <head> <title></title> <style type="text/css"> td{background-color:#0000ff} </style> <script type="text/javascript"> function bgSwap(TD) { if(TD.style && TD.style.backgroundColor) TD.style.backgroundColor = ''; else TD.style.backgroundColor = '#ff0000'; } </script> </head> <body> <table> <tr> <td onclick="bgSwap(this)">セル１</td> <td onclick="bgSwap(this)">セル２</td> </tr> </table> </body> </html>
その他の回答 (4)
- redfox63
- ベストアンサー率71% (1325/1856)
Stack OverFlowですか … 実行環境を示し無いなったほうが良いかも 当方の WIｎXP+IE6の環境では エラーになりませんでしたので …
- gura_
- ベストアンサー率44% (749/1683)
例えば、このようにします。↓ <html> <head> <title>セルの背景色を変更する</title> <script type="text/javascript"> <!-- var color1 = "#ff0000"; var color2 = "#0000ff"; var color3 = "#cccccc"; ic=1; function setCellBG1() { ic=-1*ic; if ( ic == -1 ) { this.style.backgroundColor = color1; } else { this.style.backgroundColor = color2; } } window.onload = function() { var tdTag = document.getElementsByTagName("td"); for (var i=0; i<tdTag.length; i++) { tdTag[i].style.backgroundColor = color3; tdTag[i].onmousedown = setCellBG1; } } // --> </script> </head> <body> <p>セルの上でマウスをクリックして下さい</p> <table border="1"> <tr><td>セル１</td><td>セル２</td></tr> <tr><td>セル３</td><td>セル４</td></tr> </table> </body> </html>
お礼
icを用いて比較の対象をはっきりさせているという 解釈でよろしかったでしょうか。 window.onload=function()以降が理解しきれないのですが 今後のために理解できるよう javascriptの勉強をしていきたいと思います。 今回はよいサンプルをありがとうございました。
- redfox63
- ベストアンサー率71% (1325/1856)
初期値として 何も設定されていない場合 比較部分を修正しても変化がありません if ( obj.style.backgroundColor == color1 ) { obj.style.backgroundColor = color2; } else { obj.style.backgroundColor = color1; } といった具合に判断したほうが良いでしょう
お礼
上記の比較演算子と初期値にきをつけてやってみましたが セルをクリックすると stack overflow at line:0 と表示されて動きませんでした。 よくわかりませんが やはり初期値は必要なのでしょうか。
- redfox63
- ベストアンサー率71% (1325/1856)
どのようなエラーになっていますか？ この場合 if文の判断式に = を使うと期待した動作になりません 比較演算子は == ですよ =のみですと代入になってしまいます したがって 2番目のifの条件である color2つまり青になって赤にはなりません
お礼
回答ありがとうございます。 そこは初歩の初歩ですね。 C言語でプログラムを組むときもよく間違えてしまいます。 直してやってみた結果を下記に示します。
お礼
>>styleのbackgroundColorは >><td style="background-color:～"> >>みたいな記述がなければ >>"style"も"backgroundColor"も存在しないのでいきなり比較はできない。 >>(ヘッダ部や外部スタイルシートで指定した色はそのオブジェクトのstyleプロパティではない。) backgroundColorは特に記述がなければ初期値は＃FFFFFFとなると思っていました。 >>とにかくエラーが起きないようにするには、"style"がある事を確認してから比較する。 >>ついでに、戻すときは元の色を上書きするのではなく設定した色を削除すればいい。 とてもわかりやすく説明していただき、参考になりました。 サンプルを参考に自分なりにカスタマイズしていきたいと思います。 今回はありがとうございました。