文字色が交互に変化するプログラムの作成方法
- クリックごとに文字色が交互に変化するプログラムを作りたいですが、うまく動作しません。if文の条件を書き換える必要があります。
- HTMLのテーブル内にあるリンクをクリックするたびに、文字色が変化するプログラムを作成しています。
- 現在のプログラムでは、if文の条件を間違って記述しているため、期待した動作ができません。正しい条件の表記に修正する必要があります。
- ベストアンサー
クリックごとに文字色が交互に変化する（赤青赤青赤青・・・・・）
クリックごとに文字色が変化するプログラムを作りたいのですが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>
- shu1ngsk
- お礼率23% (103/439)
- JavaScript
- 回答数3
- ありがとう数0
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
>if(event.srcElement.style.color="#ff0000") 問題はこれこれ。 if(event.srcElement.style.color=="#ff0000") こうしないと。 colorに#ff0000が代入されていつもtrueになってしまいますよ。 私もよくやるミスです。（＾＾； 結構見つけにくかったりしますね。
その他の回答 (2)
BlueRayさんのおっしゃっているとおり、この場合のif文は中各個で囲みましょう。 基本を押さえてくださいね。 それと、 <a href="javascript:void(0)"onClick="changeColor()"> のonClickの前にスペースがないので、正常に動作していませんでした。
- BlueRay
- ベストアンサー率45% (204/453)
>if文の条件の表記が間違っていると思うのですが > >if(event.srcElement.style.color="#ff0000")changeBlue(); >else changeRed(); そうですねぇ・・・ if(event.srcElement.style.color="#ff0000"){changeBlue();} else{changeRed();} こうしてみては、どうでしょうか。
関連するQ&A
- 背景色の変更を簡単に
<script type="text/javascript"> <!-- function change(bg_color){ document.bgColor = bg_color; } //--> </script> ************ <table> <tr> <td onclick="change('#FFFFEE')" style="background-color: #FFFFEE">クリーム</td> <td onclick="change('#EEFFFF')" style="background-color: #EEFFFF">水色</td> <td onclick="change('#FFEEFF')" style="background-color: #FFEEFF">桃色</td> <td>～～</td> </tr> </table> ************ javascript初心者です。テストでなんとか動くようになりました・・・ これで間違いないでしょうか？ これで正しければ onclick="change('#～～～')"の記述を全カ所にこれから入れようと思うのですが、 onclick="change('#～～～')"の部分を記述しないで、 style="background-color: #～～～">のstyleの色名＃～～～を引っ張り込む方法とか、統一する方法とか簡素化する方法はありますか？ 例えば<td style="background-color: #FFFFEE">クリーム</td> HTMLはこのままでできないでしょうか？ ここで教えて頂いた以下の画像の場合は出来たので同じように出来れば嬉しいのですが・・・ <script type="text/javascript"> function change(evt) { e = evt.target || evt.srcElement; if (e.nodeName=='IMG') document.body.style.backgroundImage = 'url(' + e.src +')'; } </script> <table onclick="change(event)"> <tr> <td><img src="a001.jpg"></td> <td><img src="a002.jpg"></td> <td><img src="a003.jpg"></td> </tr> </table> *********************** なかなか応用ができなくて困っています。 なんとか簡単にできれば嬉しいです<(_ _)>
- ベストアンサー
- JavaScript
- 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>
- ベストアンサー
- JavaScript
- リンクをクリックして画像を切り替えるには？
下記のようなソースなのですが、2枚目の画像に切り替わらず、表示されません。 何が悪いのでしょう？ <header内>-------------------------------------> <SCRIPT type="text/javascript"> <!-- function showimg1(){ document.area.src = "/jp/shop/i/popup_usbcalc/cg4.jpg"; } function showimg2(){ document.area.src = "/jp/shop/i/popup_usbcalc/cg4_zoom.jpg"; } //--> </SCRIPT> -------------------------------------> <img src="cg4.jpg" alt="" name="area" /><br /> <table> <tbody> <tr> <td>[ <a href="javascript:void()" onclick="showimg1()">リンク1</a> ]</td> <td>[ <a href="javascript:void()" onclick="showimg2()">リンク2</a> ]</td> </tr> </tbody> </table>
- ベストアンサー
- JavaScript
- 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
- HTML table内文字のonclick抑止
HTMLの書き方について質問です。 tableのtdにonclick処理を設定し、 さらに、そのtd内の文字列にもonclick処理を設定したいのですが、 文字列をクリックしたときに、同時にtdに設定したonclick処理も実行されてしまいます。 文字列をクリックしたときは、その文字列に設定してある処理だけ実行するようにはできないのでしょうか？ 具体的なサンプルは下記の通りで、 text_funcだけを実行させたいのです。 ---------------------- <html> <head> <script language="JavaScript" type="text/javascript"> <!-- function td_func(){ 折りたたまれている文字を表示する処理; } function text_func(){ TD（セル？）の背景色を変える処理; } //--> </script> </head> <body> <table border="1"> <tr> <td style="padding:10px;" onclick="td_func()"> <a href="#" onClick="text_func();return false;">test_td</a> </td> </tr> </table> </body> </html>
- ベストアンサー
- HTML
- HTMLで表を横並びにしたくて、下記のような表を作りました。
HTMLで表を横並びにしたくて、下記のような表を作りました。 この表をもう一つ右隣に作りたいのですが、どうもうまくいきません。 何を付け足せば横に並んでくれるのでしょうか？ <table style= width="500" bgcolor="#007500" cellspacing="1" cellpadding="5"> <tr> <td bgcolor="#e5ffe5" width="120"><font color="#000000"><strong><a href="紹介したURL">ああああ</strong></font></td> <td bgcolor="#ffffff"><font color="#000000"><strong>ああ<br></strong></font></td> </tr> <tr> <td bgcolor="#e5ffe5"><font color="#007500"><strong><a href="紹介したいURL">ああああ</a> </strong></font></td> <td bgcolor="#ffffff"><font color="#000000"><strong>ああ<br></strong></font></td> </tr> <tr> <td bgcolor="#e5ffe5"><font color="#000000"><strong><a href="index.html"></strong></font></td> <td bgcolor="#ffffff"><font color="#000000"><strong>あああああ</strong></font></td> </tr> </table><br> </tr>
- ベストアンサー
- その他([技術者向] コンピューター)
- マウスが重なったら画像の上に文字を表示する
今までに、画像を背景としてHTMLでその上に文字を表示することは出来たのですがそれだと文字が表示しっぱなしで、JavaScriptを使って画像にマウスが乗ると文字を表示するタイプにすると文字が画像の下に表示されてしまい上手くいきません。 画像にマウスが乗ると文字を画像の上に表示するようにするにはどのようにしたら良いでしょうか？ ちなみに HTMLで考えたもの -------------------------------------------------------- <table width="90" border="0" cellspacing="5" cellpadding="5"> <tr> <td><TABLE border="0" width="90" height="90" background="aikon/M1-アイコン2.gif"><TBODY><TR><TD> <CENTER><A href="Ｍ１/00.htm" target="_top"><Font Face="HG創英角ポップ体"><font color="White">みる</font></Font></A><BR> <A href="Ｍ１/99.htm" target="_top"><Font Face="HG創英角ポップ体"><font color="White">スライド</font></Font></A></CENTER> </TD></TR></TBODY></TABLE></td> <td><TABLE border="0" width="90" height="90" background="aikon/M2-アイコン2.gif"><TBODY><TR><TD> <CENTER><A href="Ｍ２/00.htm" target="_top"><Font Face="HG創英角ポップ体"><font color="White">みる</font></Font></A><BR> <A href="Ｍ２/99.htm" target="_top"><Font Face="HG創英角ポップ体"><font color="White">スライド</font></Font></A></CENTER> </TD></TR></TBODY></TABLE></td> </tr> -------------------------------------------------------- JavaScriptの場合 -------------------------------------------------------- <script language="javascript"> function pDsp(id){ var pItems=document.getElementsByTagName("P"); for(var i in pItems){ if(pItems[i].className=="groupABC" && pItems[i].id!=id) pItems[i].style.display='none' } var obj=document.getElementById(id); obj.style.display=(obj.style.display=='none')?'':'none'; } </script> <table width="90" border="0" cellspacing="5" cellpadding="5"> <tr> <td><P onmouseover="pDsp('a')"><img src="aikon/M1-アイコン2.gif" width="90" height="90" border="0" /></P></td> <td><P onmouseover="pDsp('b')"><img src="aikon/M2-アイコン2.gif" width="90" height="90" border="0" /></P></td> </tr> <td><P id="a" class="groupABC" style="display:none"> <nobr> <A href="Ｍ１/00.htm" target="_top"><Font Face="HG創英角ポップ体">みる</Font></A><BR> <A href="Ｍ１/99.htm" target="_top"><Font Size="2"><Font Face="HG創英角ポップ体">スライド</Font></Font></A></P></td> </nobr> <td><P id="b" class="groupABC" style="display:none"> <nobr> <A href="Ｍ２/00.htm" target="_top"><Font Face="HG創英角ポップ体">みる</Font></A><BR> <A href="Ｍ２/99.htm" target="_top"><Font Size="2"><Font Face="HG創英角ポップ体">スライド</Font></Font></A></P></td> </nobr> </table>
- ベストアンサー
- JavaScript
- HTML、テーブルが下に落ちます。
様々な実験をしてみましたが上手くいきません。何が原因なのでしょうか？ ちなみにレンタルブログのFC2を利用しています。記事のページにこのタグを貼り付けてアップしてみました。 HTMLをチェックするサイトで確認しましたが非常に悪い評価でした。 どうすれば正常に表示されるのでしょうか？ また、私は2列のメニューを作成したいのですが他にテーブル以外の方法はありますでしょうか？ <table bgcolor="#000000" width="80%" cellpadding="2" cellspacing="1" style="font-size:14px;" summary="top menu" > <tr> <td bgcolor="#000000" > <b style="color: #ffffff;font-size:15px;">■</b> <b style="color:#ffffff;font-size:16px;">あおうえお</b></td> <td bgcolor="#000000" > <b style="color: #ffffff;font-size:15px;">■</b> <b style="color:#ffffff;font-size:16px;">かきくけこ</b></td> </tr> <tr> <td bgcolor="#000000" > <b style="color:#ffffff;font-size:5px;">●</b> <a href="http://××" style="color:#ffffaa;" >さしすせそ</a></td> <td bgcolor="#000000" > <b style="color:#ffffff;font-size:5px;">●</b> <a href="http://××" style="color:#ffffaa;">たちつてと</a></td> </tr> <tr> <td bgcolor="#000000" > <b style="color:#ffffff;font-size:5px;">●</b> <a href="http://××" style="color:#ffffaa;">なにぬねの</a></td> <td bgcolor="#000000" > <b style="color:#ffffff;font-size:5px;">●</b> <a href="http://××" style="color:#ffffaa;">はひふへほ</a></td> </tr> <tr> <td bgcolor="#000000" > <b style="color:#ffffff;font-size:5px;">●</b> <a href="http://××" style="color:#ffffaa;">まみむめも</a></td> <td bgcolor="#000000" > <b style="color:#ffffff;font-size:5px;">●</b> <a href="http://××" style="color:#ffffaa;">やゆよ</a></td> </tr> <tr> <td bgcolor="#000000" > <b style="color:#ffffff;font-size:5px;">●</b> <a href="http://××" style="color:#ffffaa;">わいうえお</a></td> <td bgcolor="#000000" > <b style="color:#ffffff;font-size:5px;">●</b> <a href="http://××" style="color:#ffffaa;">テスト</a></td> </tr> <tr> <td bgcolor="#000000" > <b style="color:#ffffff;font-size:14px;">■</b> <b style="color:#ffffff;font-size:15px;">テスト２</b></td> <td bgcolor="#000000" > <b style="color:#ffffff;font-size:5px;">●</b> <a href="http://××" style="color:#ffffaa;">テスト３</a></td> </tr> お手数ですがご教授をお願いします。
- ベストアンサー
- ブログ
- テーブルのセルのクリック時、セル内の文字を太くするには
テーブルのセルをクリックした際に、セルの中に入っている文字を太字にする方法が分からず困っています。 ちょっと複雑なテーブル構造になっているのですが、具体的には、以下のような仕様で作成しています。 div要素上でクリックしたら、特定のセルの文字（この場合、id='text1'のセル）の文字を太字にしたいのです。 なお、OnClick時の処理は、外部JavaScriptで行います。 <table> <tr> <td> <div id='div1' textid='text1' onclick="ChgText(event,this)"> <table width='100%'> <tr> <td width='10%'>あああ</td> <td id='text1'>いいい</td> </tr> </table> </div> </td> <tr> </table> イベント元であるdiv要素と、処理対象のTDを関係付けるために、div要素内に「textid='text1'」定義し、外部JavaScriptでは、document.getElementByIdで処理対象を特定し、最終的には、文字を太くしたいと考えています。 外部JavaScriptの概要は以下の通りです。 function ChgText(ev,item){ var text_item = null; text_item = item.tdtext_id; var chgText = document.getElementById(text_item ); chgText.style.font-weight = bold; } 上記の内容で実行しても、文字の太さは変わりませんでした。 フォントの指定の仕方がまちがっているのでしょうか？ それとも、そもそも、div要素より後に定義されるTDタグのIDをdiv要素自身が認識しないのでしょうか？ 根本的な考え方が間違っているかもしれないので、よきアドバイスをいただけるとありがたいです。 よろしくお願いいたします。
- ベストアンサー
- 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
