- ベストアンサー
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言語でプログラムを組むときもよく間違えてしまいます。 直してやってみた結果を下記に示します。
関連するQ&A
- セルの色＞何が足りないのでしょうか？
こんにちは。 下記のようなテストを作っています。３択式で実際は５～１５問なのでもう少し大きな表です。そこで教えていただきたいことがあります。 下の設定ですと、問(2)へ行くと問(1)で選択した回答の色が消えてしまいます。 どうしたらそのまま残しておけるのでしょうか？ 初心者ですので、出来ましたら丁寧なご回答をお願いいたします。（ＸＰ、ＩＥ６） <html> <head> <script language="JavaScript"><!-- var col; //選択しス色 var old_obj = null;//1つ前に選択した色を記憶しておく変数 function ActiveColor(obj){ //色がクリックされた時 if(old_obj != null){ //1つ前に選択した色の周りに表示されているグレー色を消す old_obj.style.backgroundColor = ""; } //選択した色の周りにグレー色を付ける obj.style.backgroundColor = "darkgray"; col = obj.style.color;//選択された色を保存 old_obj = obj; //現在の選択色を、1つ前として格納 //色をクリックした時にBgChange()関数が実行されないように //イベント階層の浮上(bubble up)をキャンセルする window.event.cancelBubble = true; } //--></script> </head> <body onclick="BgChange();"> <table border=1> <tr> <td>(1)</td> <td style="color:black" onclick="ActiveColor(this);">No.1</td> <td style="color:black" onclick="ActiveColor(this);">No.2</td> <td style="color:black" onclick="ActiveColor(this);">No.3</td> </td> <tr> <td>(2)</td> <td style="color:black" onclick="ActiveColor(this);">No.4</td> <td style="color:black" onclick="ActiveColor(this);">No.5</td> <td style="color:black" onclick="ActiveColor(this);">No.6</td> </tr> </table> </body> </html>
- ベストアンサー
- レンタルサーバ・ASP
- セルの色を白くしたい。
いつもお世話になっています。 以前こちらでjavascriptでまとめてセルの色を変えたいとお聞きした際答えていただき、それを元に下記のようなものを作りました。 色を変えるところはできたのですが、一度ついた色が消えないため、これを白に戻したいのですがどのようにすればよいでしょうか？ 現状では、ボタンを押すとすべてクリアできれば満足ですが、いずれは細かく選択して白くしたいと思っています。 また、色を変える際、マウスオン、マウスアウトの際の追従がセルが多くなると遅延が発生してしまいますが、これを改善する方法はありますでしょうか？ 質問がわかりにくいかもしれませんがよろしくお願いします。 ＜現状のスクリプト＞ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <HTML lang="ja"> <HEAD> <TITLE>スケジュールtest</TITLE> <STYLE> <!-- #colorchange{ border-collapse:collapse; } #colorchange td{ border:1px solid #000; width:20px; height:20px; background-color:#FFFFFF; } --> </STYLE> </HEAD> <BODY><SCRIPT> window.onload=function() { var t=document.getElementById("colorchange"); t.start=0; t.flg=false; var tds=t.getElementsByTagName("td"); var l=tds.length; var color=0; color = new Array(); var first=1; var selcolor="#ffc0c0"; var mousecolor="#ffc000"; var dbcolor="#ffff00" for(var i=0;i<l;i++) { tds[i].count=i; color[i]="#FFFFFF"; tds[i].onclick=function() { if(!t.flg) { t.start=this.count; } else { for(var j=0;j<l;j++) { if(first) { if(j>=t.start && j<=this.count || j<=t.start && j>=this.count) { tds[j].style.backgroundColor=selcolor; color[j]=tds[j].style.backgroundColor; } else { tds[j].style.backgroundColor="#FFFFFF"; color[j]="#FFFFFF"; } } else { if(j>=t.start && j<=this.count || j<=t.start && j>=this.count) { tds[j].style.backgroundColor=selcolor; } else { tds[j].style.backgroundColor=color[j]; } color[j]=tds[j].style.backgroundColor; } } t.start=0; first = 0; } t.flg=t.flg?false:true; } tds[i].onmouseover=function() { if(!t.flg) return false; for(var j=0;j<l;j++) { if(j>=t.start && j<=this.count || j<=t.start && j>=this.count) { if(color[j] == selcolor) { tds[j].style.backgroundColor=dbcolor; } else { tds[j].style.backgroundColor=mousecolor } } } } tds[i].onmouseout=function() { if(!t.flg) return false; for(var j=0;j<l;j++) { tds[j].style.backgroundColor=color[j]; } } } } </SCRIPT> <TABLE id="colorchange"> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> </table> </BODY> </HTML>
- ベストアンサー
- JavaScript
- 元の色に戻すには？
一行おきに青色を付けているテーブルに対して、マウスカーソルを当てた場合、アクティブな行は赤にしたいのですが、 その後、マウスが離れたら元の色に戻したいのですが、 元の色に戻すにはどうすればいいですか？ --------------------------------------------------------- <style type="text/css"> tr.color_Yes{background-color: blue; } </style> <body> <table border=1 id="Active_row_Color"> <tr class="color_Yes"><td>セル1</td><td>セル2</td></tr> <tr><td>セル3</td><td>セル4</td></tr> <tr class="color_Yes"><td>セル5</td><td>セル6</td></tr> <tr><td>セル7</td><td>セル8</td></tr> <tr class="color_Yes"><td>セル9</td><td>セル10</td></tr> </table> --------------------------------------------------------- これで、1行おきにテーブルの行全体が青になります。 さらに --------------------------------------------------------- <script type="text/javascript"> <!-- firstcolor="White"; nextcolor="red"; function table_row(table_id){ tobj=document.getElementById(table_id).tBodies[0]; for (i=0; i<tobj.rows.length;i++){ tobj.rows[i].onmouseover=function(){this.style.backgroundColor=nextcolor}; tobj.rows[i].onmouseout=function(){this.style.backgroundColor=firstcolor}; } } // --> </script> --------------------------------------------------------- と --------------------------------------------------------- <script>table_row("Active_row_Color")</script> --------------------------------------------------------- を追加することで、マウスカーソルをあてた行が赤になるのですが マウスカーソルが離れると白になってしまいます。 それは --------------------------------------------------------- firstcolor="White"; と tobj.rows[i].onmouseout=function(){this.style.backgroundColor=firstcolor}; --------------------------------------------------------- が原因だと思いますが、 では、もともと青色の行の場合は、マウスカーソルが離れた場合、どうやって青に戻せばいいのでしょうか？ 現在の行の背景色を取得して、それをどこか変数に格納し、元に戻すことは可能ですか？ 添付画像は、一番下の行にマウスカーソルをあてた状態です。
- 締切済み
- JavaScript
- Javascript クリックした場所のみセルの色を変えたい
HTML・JSともに初心者です。 よろしくお願いします。 現在テーブルの作成を行っており、 リンクをクリックしたセルのみ色を変更するという物を作りたいのですが、うまくいきませんorz ※現在は文字の色が変わっているとおもいます・・・ 現在下記のように作成しましたが困っております。 どのように直せばよいかご教授願います。 --- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <HTML> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <META http-equiv="Content-Style-Type" content="text/css"> <TITLE>サンプル</TITLE> <script language="javascript"> <!-- var nCountMax = 5; //リンクの数 var arrColor= new Array("#000000", "#FFFFFF"); function Set(nIndex) { var strName, nLoop; if (document.getElementById) { for (nLoop = 0; nLoop < nCountMax; nLoop++) { //strName = "lnkMouse"+nIndex; if (nLoop != nIndex) { document.getElementById("lnkMouse"+nLoop).style.background=arrColor[1]; } else { document.getElementById("lnkMouse"+nIndex).style.background=arrColor[0]; } } } } //--> </script> </HEAD> <BODY text="#ff80c0" link="#ff80c0" vlink="#ff80c0" alink="#ff80c0"> <table border="1" width="500"> <tr> <td><a href="#" onClick="Set(0);" name="lnkMouse0">クリック</a></td> <td><a href="#" onClick="Set(1);" name="lnkMouse1">クリック</a></td> <td><a href="#" onClick="Set(2);" name="lnkMouse2">クリック</a></td> <td><a href="#" onClick="Set(3);" name="lnkMouse3">クリック</a></td> <td><a href="#" onClick="Set(4);" name="lnkMouse4">クリック</a></td> </tr> </table> </BODY> </HTML> ---
- ベストアンサー
- JavaScript
- onmouseoverを外部にまとめる
お忙しいところすいません 以下のようなマウスオーバーで背景が変わるテーブルを制作してますが、長くなるので「onmouseover」等をまとめる方法があれば教えてください。 ■---元----------------------■ <head> </head> <body> <table> <tr> <tr> <td onmouseover="this.style.backgroundColor='#ffffcc';" onmouseout="this.style.backgroundColor='#68ceff'" bgcolor="#68ceff">リンク</td> </tr> <tr> <td onmouseover="this.style.backgroundColor='#ffffcc';" onmouseout="this.style.backgroundColor='#68ceff'" bgcolor="#68ceff">リンク</td> </tr> </table> </body> </html> ■---希望----------------------■ <head> <script language="JavaScript"> <!-- td#over { onmouseover="style.background='#ccccff'"; onmouseout="style.background='#68ceff'" } //--> </script> </head> <body> <table> <tr> <tr> <td id="over">リンク</td> </tr> <tr> <td id="over">リンク</td> </tr> </table> </body> </html> -------------------------------- ＣＳＳもJavaScript初心者ですので全く的外れな質問かもしれませんがよろしくお願いします。
- ベストアンサー
- JavaScript
- 順番にセルの背景色をつけたい
javascriptを使って セルの背景色一定の時間で順番に変える方法を調べています。 ボタンをクリックすると □□□□ ↓ ■□□□ ↓ □■□□ ↓ □□■□ ↓ □□□■ と変化するようなものを作成したいと考えております。 下記のソースでalertを出すと実現できるのですが、 alertをコメントアウトするとうまくいきません。 以上の点、アドバイス等お願いします。 <html> <head> <title></title> <script type="text/javascript"> function changeColor(){ var targetTable = document.getElementById('colorchange'); var targetTr = targetTable.rows[0]; var tdLen = targetTr.cells.length; for(var i = 0 ; i < tdLen ; i++ ){ if( i==0 ){ targetTr.cells[0].style.backgroundColor='red'; }else{ targetTr.cells[i-1].style.backgroundColor='white'; targetTr.cells[i].style.backgroundColor='red'; } wait( 300 ); //このalertを消すとうまくいかない alert('test'); } } function wait( timeWait ) { var timeStart = new Date().getTime(); var timeNow = new Date().getTime(); while( timeNow < (timeStart + timeWait ) ) { timeNow = new Date().getTime(); } } </script> </head> <body> <table border="1" id="colorchange"> <tr> <td>1111</td> <td>2222</td> <td>3333</td> <td>4444</td> </tr> </table> <button onClick="changeColor()">スタート</button> </body> </html>
- ベストアンサー
- JavaScript
- 表の一部のセルの背景色を変更したい
いつもお世話になっております。 IE6.0上で動作するものとして質問させていただきます。 以下のソースの中でBODYタグのonloadイベントで initメソッドを呼びだし、メソッド中で 表中の任意のセルの背景色を変更するにはどのように すればよいのでしょうか。 --------------------------------------- <HTML> <HEAD> <script language="JavaScript"> <!-- function init(){ //------ここでで各セルの背景色を変更したいのです。 } --> </script> </HEAD> <BODY onload="init(); "> <FORM name="tttt"> <TABLE border="1" > <TBODY> <TR> <TD onClick="this.style.backgroundColor = 'black';">test</TD> <TD onClick="this.style.backgroundColor = 'red';">test</TD> <TD onClick="this.style.backgroundColor = 'yellow';">test</TD> </TR> </TBODY> </TABLE> </FORM> </BODY> </HTML> --------------------------------------- ソースは簡略化しておりますので、内容に不備がございましたら、ご容赦ください。 ご回答をよろしくお願いいたします。
- ベストアンサー
- HTML
- javascript文字をhtmlにセットする
恐れ入ります。 <script> function changeBoxColor( newColor ) { document.getElementById('irocolor').style.backgroundColor = newColor; } </script> <style> .b1{ background-color: #fffff0; } </style> <table border="1" id="irocolor"><tr><td> <a href="#" class="b1" onclick="changeBoxColor('#fffcf0');"></a> </td></tr></table> として、背景色の変更はできたのですが、この色コードを同一html内の<input type="hidden" name="color" value="XXXX">の中に代入したいのですが、方法が分かりません。よろしくお願い申し上げます。
- ベストアンサー
- JavaScript
- 条件にあったテーブルのセルを数える
テーブルを作り、それぞれのセルをonmouseoverすると背景が変わるようになっています。そして、背景が変わった後に、何個のセルの背景が変わったのかを知りたいのですが、どうもうまくいきません。alertで確認してもいつも「０」として出てきます。お手数ですが、ご指導お願いします。 <script type="text/javascript"> function bgSwap(TD) { if(window.event.shiftKey == true) { if(TD.style && TD.style.backgroundColor){ TD.style.backgroundColor = ''; } else{ TD.style.backgroundColor = '#000000'; } } } function sendToparent(){ var count=0; var i; var tdname = document.getElementById('F1table').getElementsByTagName('td'); for (i=0; i < tdname.length; i++) { if(tdname[i].style.backgroundColor == "#000000"){ count = count+1; }else { count = count; } } alert(count); } </script> <body> <input type='button' value='set' onclick='sendToparent()'> <table id='F1table' border="0" bordercolor = '#000000' > <tr> <td onmouseover="bgSwap(this)" width="35" height="35"></td> <td onmouseover="bgSwap(this)" width="30" height="30"></td> <td onmouseover="bgSwap(this)" width="30" height="30"></td> <td onmouseover="bgSwap(this)" width="30" height="30"></td> <td onmouseover="bgSwap(this)" width="30" height="30"></td> <td onmouseover="bgSwap(this)" width="30" height="30"></td> <td onmouseover="bgSwap(this)" width="30" height="30"></td> <td onmouseover="bgSwap(this)" width="30" height="30"></td> <td onmouseover="bgSwap(this)" width="30" height="30"></td> <td onmouseover="bgSwap(this)" width="30" height="30"></td> </tr> </table> </body>
- 締切済み
- JavaScript
- クリックごとに文字色が交互に変化する（赤青赤青赤青・・・・・）
クリックごとに文字色が変化するプログラムを作りたいのですがchangeColor()の部分の処理がうまく動作しません。おそらくif文の条件の表記が間違っていると思うのですが、どのように書き換えればいいのでしょうか？ <html> <head> <script language="JavaScript"> <!-- function changeColor() { if(event.srcElement.style.color="#ff0000")changeBlue(); else changeRed(); } function changeRed() { event.srcElement.style.color="#ff0000"; } function changeBlue() { event.srcElement.style.color="#0000ff"; } //--> </script> </head> <body > <table border="10" width="100" height="100" align="center" valign="top" bgColor="#ffffff"> <tr> <td><a href="javascript:void(0)"onClick="changeColor()"><font size="7">A</font></a></td> <td><a href="javascript:void(0)"onClick="changeColor()"><font size="7">B</font></a></td> </tr> </table> </body> </html>
- ベストアンサー
- JavaScript
お礼
>>styleのbackgroundColorは >><td style="background-color:～"> >>みたいな記述がなければ >>"style"も"backgroundColor"も存在しないのでいきなり比較はできない。 >>(ヘッダ部や外部スタイルシートで指定した色はそのオブジェクトのstyleプロパティではない。) backgroundColorは特に記述がなければ初期値は＃FFFFFFとなると思っていました。 >>とにかくエラーが起きないようにするには、"style"がある事を確認してから比較する。 >>ついでに、戻すときは元の色を上書きするのではなく設定した色を削除すればいい。 とてもわかりやすく説明していただき、参考になりました。 サンプルを参考に自分なりにカスタマイズしていきたいと思います。 今回はありがとうございました。