ブログでonClickを2つ以上並べると動かない

2023/09/05 21:32

このQ&Aのポイント

ブログ上のhtmlタグについて質問です。"onClick"のタグを1つ張ると動くのですが、2つ以上並べると動かなくなります。ブログはseesaaブログを使っています。
onClickのタグを2つ以上並べると、ブログ上のhtmlタグが動作しない問題について質問です。使用しているブログはseesaaブログです。
seesaaブログでonClickのタグを2つ以上使用すると、タグが正常に機能しない問題が発生しています。

ベストアンサー

ブログでonClickを2つ以上並べると動かない

2014/12/29 04:29

ブログ上のhtmlタグについて質問です。"onClick"のタグを1つ張ると動くのですが、2つ以上並べると動かなくなります。ブログはseesaaブログを使っています。 ↓動く <span onClick="document.all.item('moji2').style.visibility='visible'" onClick="document.all.item('moji2').style.visibility='hidden'"> クリックする文字 </span> <div ID="moji2" onClick="document.all.item('moji2').style.visibility='hidden'" style="visibility:hidden;"> この文字をクリックすると消えます </div> ↓動かない <span onClick="document.all.item('moji2').style.visibility='visible'" onClick="document.all.item('moji2').style.visibility='hidden'"> クリックする文字 </span> <div ID="moji2" onClick="document.all.item('moji2').style.visibility='hidden'" style="visibility:hidden;"> この文字をクリックすると消えます </div> <span onClick="document.all.item('moji2').style.visibility='visible'" onClick="document.all.item('moji2').style.visibility='hidden'"> クリックする文字 </span> <div ID="moji2" onClick="document.all.item('moji2').style.visibility='hidden'" style="visibility:hidden;"> この文字をクリックすると消えます </div> よろしくお願いします。

hdmm
お礼率33% (1/3)

ブログ
回答数1
ありがとう数9

みんなの回答 （1）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

AsarKingChang
ベストアンサー率46% (3467/7473)

2014/12/29 05:30 回答No.1

楽しめました。ありがとう。まず、IDが複数ありませんか？ 1つ目がmoji2なら、2つ目をmoji2以外にしてはどうですか？さらに、 <span onClick="document.all.item('moji2').style.visibility='visible'" onClick="document.all.item('moji2').style.visibility='hidden'"> ここ、同じ変数に、visibleとhiddenを代入しちゃってますよ。。 CSSのデフォルトが、hiddenなので、入れるのは、visibleのみでいいと思います。 <div ID="moji2" onClick="document.all.item('moji2').style.visibility='hidden'" style="visibility:hidden;"> 上記を整理すると ------------------- ↓動かない（はずだったもの） <span onClick="document.all.item('moji2').style.visibility='visible'"> クリックする文字 </span> <div ID="moji2" onClick="document.all.item('moji2').style.visibility='hidden'" style="visibility:hidden;"> この文字をクリックすると消えます </div> <span onClick="document.all.item('moji3').style.visibility='visible'"> クリックする文字 </span> <div ID="moji3" onClick="document.all.item('moji3').style.visibility='hidden'" style="visibility:hidden;"> この文字をクリックすると消えます </div> ------------------- ではどうですか？

質問者

お礼 2014/12/29 06:04

動きました！ありがとうございます^^ 助かりました。

関連するQ&A

あるタグについて質問します
タグについて質問します。。ブログを書いているのでが　あるサイトで見つけたものでタグをコピーして使えるものなのですがオンクリックと言ってクリックしたら文字や画像が出るものです。。。 ↓このタグです <span onClick="document.all.item('moji1').style.visibility='visible'"> クリックする文字 </span> <div ID="moji1" style="visibility:hidden;"> 表示される文字 </div> 私はタグは素人なので解らないのですがこのタグをブログの記事に書いてみてこのタグを１つ使って書いた場合、きちんとクリックしたら反応して文字が出てくるのですが同じ記事内にこのタグを２つ使うとクリックしても文字がでてこなくなって反応しません。。。また同じ記事内では反応しないのかと思って１つの記事に１つずつ使おうと今度は記事を二つに分けて使おうとしたらさっきまでクリックしたら反応していた一つ目の記事までクリックに反応しなくなります。そして２つ目の記事を削除したらまた元のように１つ目の記事がクリックに反応してくれます。もしかして、このタグになにかプラスする事によってきちんとクリックしても使えるようにならないでしょうか？同じ記事内でも、あるいは１つの記事に１つずつでもいいのであれば教えてもらえたら嬉しいです。。。また、このタグでは１つ以上は無理なのでしたら記事内に１つずつでもよいので他によいタグがあれば教えていただけたら嬉しいです。。。よろしくお願い致します
- ベストアンサー
- HTML
onMouseOverの適応範囲
困ってしまい質問させていただきます。 <div> 　<a href="t1.html" onMouseOver="javascript:document.all('id1').style.visibility='visible';" onMouseOut="javascript:document.all('id1').style.visibility='hidden';">show</a> </div> <div id="id1" onMouseOver="javascript:document.all('id1').style.visibility='visible';" onMouseOut="javascript:document.all('id1').style.visibility='hidden';"> 　<a href="image.gif" onMouseOver="javascript:document.writeln(document.all('id1').style.visibility)">イメージ</a> </div> 以上のhtmlでは、「イメージ」にマウスを持っていくと、hiddenと表示されてしまいます。一度も<div id="id1"></div>から離れていないため、visibleと表示されると思っているのですが、<div></div>の中であっても、onmouseOutが実行されてしまうのでしょうか？ブラウザはIEを利用しています。どうか宜しくお願いします。
- ベストアンサー
- JavaScript
Mac(Safari)で無効なHTMLタグ？？
http://copicopi.com/onmousefont.html ↑こちらで紹介されていたHTMLタグの「オンマウス文字」を会社のHPに使用したのですが、ウインドウズ(Internet Explorer)では、正しくマウスオンすると作動しましたが社内のマックで同様の画面を確認したところ、マウスオンしても作動しません。上記のタグ説明されているHPもマック(Safari)でみると、オンマウス文字は正しく作動しないので、マックではこのタグ使えないのでしょうか？マックにもウインドウズでも作動する、オンマウス文字やオンクリック文字などのタグがあれば紹介してください。お願いいたします。《今回使用したオンマウス文字のタグです↓》 <span onmouseover="document.all.item('moji1').style.visibility='visible'"> この文字にマウスをのせて下さい♪ </span> <div ID="moji1" style="visibility:hidden;"> 表示される文字 </div>
- 締切済み
- HTML
ドロップダウンメニューを短縮したい
今ドロップダウンメニューを作っていて、メニューを大量に作りたい時に、下に添付してあるプログラムでは膨大になりすぎて入力がしんどいです。ドロップダウンメニューには他にも様々なプログラム表記があると思います。ですので、メモ張にプログラムを貼ったら下と似たようなプログラムができ、なおかつこんな長ったらしいプログラムじゃなくても、こうすれば短くできる、などの知恵を持っていらっしゃる方がいらっしゃったら、是非ともご教授願えないでしょうか？。できればプログラムで回答してもらえるとありがたいです。よろしくお願い致します。 <script language="javaScript"> function overL0(){ document.all("L0").style.backgroundColor="yellow"; document.all("S1").style.visibility="hidden";document.all("si1").style.visibility="hidden";document.all("si2").style.visibility="hidden"; } function offL0(){ document.all("L0").style.backgroundColor="#afeeee"; document.all("S1").style.visibility="hidden";document.all("si1").style.visibility="hidden";document.all("si2").style.visibility="hidden"; } function overL1(){ document.all("L1").style.backgroundColor="yellow"; document.all("S1").style.visibility="visible"; } function offL1(){ document.all("L1").style.backgroundColor="#afeeee"; document.all("S1").style.visibility="visible"; } function overS1(){ document.all("S1").style.backgroundColor="yellow"; document.all("S1").style.visibility="visible";document.all("si1").style.visibility="visible";document.all("si2").style.visibility="visible"; } function offS1(){ document.all("S1").style.backgroundColor="#afeeee"; document.all("S1").style.visibility="visible";document.all("si1").style.visibility="visible";document.all("si2").style.visibility="visible"; } function oversi1(){ document.all("si1").style.backgroundColor="yellow"; document.all("si1").style.visibility="visible"; } function offsi1(){ document.all("S1").style.backgroundColor="#afeeee"; document.all("si1").style.visibility="visible"; } function oversi2(){ document.all("si2").style.backgroundColor="yellow"; document.all("si2").style.visibility="visible"; } function offsi2(){ document.all("si2").style.backgroundColor="#afeeee"; document.all("si2").style.visibility="visible"; } </script> <body> <div id="L0" style="position:relative;background-color:#afeeee; width:1500;height:30" onMouseOver="overL0()" onMouseOut="offL0()"> </div> <div id="L1" style="position:relative;background-color:#afeeee; width:150;height:30" onMouseOver="overL1()" onMouseOut="offL1()"> name1 </div> <div id="S1" style="position:absolute;top:45;left:160;background-color:#afeeee; width:150;height:30;visibility:hidden;" onMouseOver="overS1()" onMouseOut="offS1()"> name2 </div> <div id="si1" style="position:absolute;top:45;left:310;background-color:#afeeee; width:150;height:30;visibility:hidden;" onMouseOver="oversi1()" onMouseOut="offsi1()"> <a href="http://www.google.co.jp/" target="blank" target="c">A</a><br> </div> <div id="si2" style="position:absolute;top:75;left:310;background-color:#afeeee; width:150;height:30;visibility:hidden;" onMouseOver="oversi2()" onMouseOut="offsi2()"> <a href="http://www.google.co.jp/" target="blank" target="c">B</a><br> </div> </body>
- ベストアンサー
- その他(ソフトウェア)
このプログラムを改善してくれませんか？。
今ドロップダウンメニューを作っていて、メニューを大量に作りたい時に、下に添付してあるプログラムでは膨大になりすぎて入力がしんどいです。ドロップダウンメニューには他にも様々なプログラム表記があると思います。ですので、メモ張にプログラムを貼ったら下と似たようなプログラムができ、なおかつこんな長ったらしいプログラムじゃなくても、こうすれば短くできる、などの知恵を持っていらっしゃる方がいらっしゃったら、是非ともご教授願えないでしょうか？。できればプログラムで回答してもらえるとありがたいです。よろしくお願い致します。 <script language="javaScript"> function overL0(){ document.all("L0").style.backgroundColor="yellow"; document.all("S1").style.visibility="hidden";document.all("si1").style.visibility="hidden";document.all("si2").style.visibility="hidden"; } function offL0(){ document.all("L0").style.backgroundColor="#afeeee"; document.all("S1").style.visibility="hidden";document.all("si1").style.visibility="hidden";document.all("si2").style.visibility="hidden"; } function overL1(){ document.all("L1").style.backgroundColor="yellow"; document.all("S1").style.visibility="visible"; } function offL1(){ document.all("L1").style.backgroundColor="#afeeee"; document.all("S1").style.visibility="visible"; } function overS1(){ document.all("S1").style.backgroundColor="yellow"; document.all("S1").style.visibility="visible";document.all("si1").style.visibility="visible";document.all("si2").style.visibility="visible"; } function offS1(){ document.all("S1").style.backgroundColor="#afeeee"; document.all("S1").style.visibility="visible";document.all("si1").style.visibility="visible";document.all("si2").style.visibility="visible"; } function oversi1(){ document.all("si1").style.backgroundColor="yellow"; document.all("si1").style.visibility="visible"; } function offsi1(){ document.all("S1").style.backgroundColor="#afeeee"; document.all("si1").style.visibility="visible"; } function oversi2(){ document.all("si2").style.backgroundColor="yellow"; document.all("si2").style.visibility="visible"; } function offsi2(){ document.all("si2").style.backgroundColor="#afeeee"; document.all("si2").style.visibility="visible"; } </script> <body> <div id="L0" style="position:relative;background-color:#afeeee; width:1500;height:30" onMouseOver="overL0()" onMouseOut="offL0()"> </div> <div id="L1" style="position:relative;background-color:#afeeee; width:150;height:30" onMouseOver="overL1()" onMouseOut="offL1()"> name1 </div> <div id="S1" style="position:absolute;top:45;left:160;background-color:#afeeee; width:150;height:30;visibility:hidden;" onMouseOver="overS1()" onMouseOut="offS1()"> name2 </div> <div id="si1" style="position:absolute;top:45;left:310;background-color:#afeeee; width:150;height:30;visibility:hidden;" onMouseOver="oversi1()" onMouseOut="offsi1()"> <a href="http://www.google.co.jp/" target="blank" target="c">A</a><br> </div> <div id="si2" style="position:absolute;top:75;left:310;background-color:#afeeee; width:150;height:30;visibility:hidden;" onMouseOver="oversi2()" onMouseOut="offsi2()"> <a href="http://www.google.co.jp/" target="blank" target="c">B</a><br> </div> </body>
- ベストアンサー
- その他(ソフトウェア)
Flashで作成したボタンをJavascriptに使用したい
JavaScriptで下記のような記述をしました。 function btnCli(con) { document.all("main").style.visibility="hidden"; document.all("company").style.visibility="hidden"; document.all(con).style.visibility="visible"; } Flashで作成したボタンには <a href = "javascript:btnCli('company')";> <Flashのボタン>←ここに記述してる </a> としているのですが、関数の引数にcompanyが渡らないらしく画面が表示されません。表示させたい画面には <div id = "company" style ="visibility:hidden; z-index:16;"> ～と記述しております。本文・背後の文と何枚か文を重ねていてメニューのボタンをクリックすると入れ替わるようにしたいのですができますでしょうか？ちなみにFlashで作成したボタンではなく、ただの文字や普通の画像であれば出来ました。
- ベストアンサー
- JavaScript
リンクについて質問です。
div要素で左側がメニュー・右側がコンテンツという配置にしました。右側のコンテンツは、背後に3つの文章をvisibility="hidden"で隠しています。　メニュー側からだと上手くリンク先に飛ぶのですが、コンテンツ側からだと全く反応しません。ちなみにリンク先の文章を表示する場所は、右側の部分です。メニュー側の方で一度全てリンクをクリックしてからだとなぜかコンテンツ側でもリンク先に飛ぶことが出来ます。何故でしょうか？？ function change(con) { document.all("main").style.visibility="hidden"; document.all("lesson").style.visibility="hidden"; document.all("lesson2").style.visibility="hidden"; document.all("lesson3").style.visibility="hidden"; document.all(con).style.visibility="visible"; }
- ベストアンサー
- JavaScript
ネスケ6以上でも動作させたいのですが・・・・・
ネスケ６からlayerがサポートされていないということなのですが、以下をどう書き直せば、ネスケ6以上でも動作するようになるのでしょうか？単純にgetElementByIdに置き換えても動かないですよね・・・・力不足(T_T) どなたかお助けお願いいたします。 <STYLE TYPE="text/css">  </STYLE> <SCRIPT LANGUAGE="JavaScript">  </SCRIPT> </HEAD> <BODY> <P><IMG src="image.gif" border="0" width="285" height="39"></P> <DIV ID="menu1"> <A HREF="function voi(){};voi()" onClick="pullDownMenu('tag1');return false">わんにゃん</A> </DIV> <DIV ID="tag1"> <A href="dog.html"> わんこ </A><BR> <A HREF="cat.htm"> にゃんこ </A><BR> <A HREF="kitten.htm"> こにゃんこ </A><BR> </DIV> </BODY>
- ベストアンサー
- JavaScript
HTMLにて表示非表示後の行詰め方法
フィールドのクリックによってText文を非表示/表示切りかえることを考えています。その際（非表示）前後の文書（入力域、ボタン）などの行詰めの方法がわかりません。皆さんに教えていただきたく投稿しました。よろしくお願いします。尚サンプルを付けました。 <HTML> <HEAD> <TITLE>サンプル</TITLE> </HEAD> <script type="text/javascript">  </script> <BODY> <DIV ID="text1" STYLE="font-size=10pt;font-family=Times New Roman">教えてください</DIV> 下記入力フィールド１でクリックすると表示切替します。<br> <input type="text" size="30" name ="a" value="入力フィールド１" id="T1" onclick="A()"> <p> <button >文字列変更1</button><p> <button >文字列変更2</button><p> <input type="text" size="30" name ="b" value="入力フィールド２" id="T2"> <p> このページはテストです。 </BODY> </HTML>
- 締切済み
- HTML
apply()とplay()の使い方
document.all.item(id).filters[0].apply(); document.all.item(id).style.visibility = "visible"; document.all.item(id).filters[0].play(); apply()とplay()はどういう意味でしょうか。
- ベストアンサー
- JavaScript