onclickで別の場所にテキストを表示させたい

このQ&Aのポイント
  • HTMLとJavaScriptを使って、onclickイベントを利用してテキストを別の場所に表示させる方法を教えてください。
  • これをJavaScriptで指示することは可能でしょうか?ネスケでもIEでも動作する指示を出したいです。
  • もしオンクリックが動かない場合、どのように対処すればよいのでしょうか?
回答を見る
  • ベストアンサー

onclickで別の場所にテキストを表示させたい

<a onMouseover="this.style.textDecoration='underline'" onMouseout="this.style.textDecoration='none'" onclick="document.all.d.style.display=document.all.d.style.display=='none'?'':'none'">★★ ~ <p ID=d STYLE="display:none">●● という★★(否リンク)ではないテキストをクリックする(オンマウスオーバーで下線表示)と別の場所に●●が表示されるという支持をHTMLで出しているのですが、これをJavaScriptで指示させる事は可能でしょうか?今のままだとネスケでオンクリックが動かないので困っております…要はネスケでもIEでも動くような指示を出したいのですが…

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

  • ベストアンサー
  • BLUEPIXY
  • ベストアンサー率50% (3003/5914)
回答No.1

document.all.dではなく document.getElementById('d') を使いましょう

katzenego
質問者

お礼

回答有難うございます。 出来ました!!本当にありがとうございました!!!

関連するQ&A

  • onclickで別の場所にテキストを表示させたい

    先程も質問させて頂いたのですが、問題にぶち当たったので再度お願いしますm(__)m <a onMouseover="this.style.textDecoration='underline'" onMouseout="this.style.textDecoration='none'" onclick="document.getElementById('1').style.display= document.getElementById('1').style.display=='none'?'':'none'">★★ <p ID=1 STYLE="display:none">●● で、★★をクリックすると「別の場所にある●●」が表示されるように指示を出しているのですが、 ★★が複数あり其々表示される●●も違う、だが●●が表示される場所は同一の場所にしたい、 というのを目指しているのですが、上記の場合だと ★★1をクリックした後に★★2をクリックすると●●1がそのまま残ったその下に●●2が表示されてしまいます。 ★★1をクリックした後で★★2をクリックした時結果として●●2だけを表示させたいのですが、どうしたらいいでしょうか…? それが5つぐらい予定しているのですが…JavaScriptで指示した方が簡単でしょうか?

    • ベストアンサー
    • HTML
  • onMouseoverで下線表示したい(リンクではないテキスト)

    リンクではないテキスト部分に <a onMouseover="this.style.textDecoration='underline'" onMouseout="this.style.textDecoration='none'"> を入れるとリンクではないテキスト部分に下線がつくのですが、同じテキストに<onclick="document.all.d.style.display= document.all.d.style.display=='none'?'':'none'"> という別の場所に別のテキストを表示する支持を入れたいのですが、一緒に入れてしまうと動いてくれません…どうしたらよいか教えてください。

    • ベストアンサー
    • HTML
  • 特定の場所の番号を連続して入力する方法やソフト

    <a onmouseover="txt1.style.display='block'" onmouseout="txt1.style.display='none'"> 上記ので「txt1」という2つの部分だけを <a onmouseover="txt2.style.display='block'" onmouseout="txt2.style.display='none'"> <a onmouseover="txt3.style.display='block'" onmouseout="txt3.style.display='none'"> 「txt2」「txt3」と書きかえていき、今現在1200まで書いてきました。 しかし「txt10000」まで書かなくてはいけません、大変なので数字の部分だけ連続して番号を書けるようになるソフトはありますでしょうか?。

  • 隠れた文章をマウスで表示させる方法について教えてください

    色々なサイトを調べた結果下のようなソースにたどり着きました。 ソースを記述後、質問内容書きますので最後まで読んでください。 ――――――――――――――――――――――――――――― <P onmouseover="document.all.a.style.display=document.all.a.style.display=='none'?'':'none'">1日目</P> <P id=a style="display:none"> <A href="1-0/00.htm">見る</A> <A href="1-1.htm">スライドショー</A> </P> <P onmouseover="document.all.b.style.display=document.all.b.style.display=='none'?'':'none'">2日目</P> <P id=b style="display:none"> <A href="2-0/00.htm">見る</A> <A href="2-1.htm">スライドショー</A> </P> <P onmouseover="document.all.c.style.display=document.all.c.style.display=='none'?'':'none'">3日目</P> <P id=c style="display:none"> <A href="3-0/00.htm">見る</A> <A href="3-1.htm">スライドショー</A> </P> ――――――――――――――――――――――――――――― 上記のソースで目的としているホームページが出来ているのですが、例えば1日目の上にマウスポインターを持ってきた時には見るとスライドショーと言う文字が表示されます。しかしその状態で2日目にポインターを合わせると、同じく見るとスライドショーと言う文字が表示されますが、1日目の文字も表示されたままです。再び1日目に合わせない限り消えません。 そこで1日目にポインターを合わせて文字を表示させた後、2日目にポインタを合わせると1日目に表示してある文字が消えて2日目の文字が出るようにしたいのです。 説明が下手ですが、1つを表示した状態で2つ目を表示させないようにしたいのです。 大変分かりにくい説明で大変恐縮ですが時間がありません誰でも良いので助けてください。 よろしくお願いします

    • ベストアンサー
    • HTML
  • マウスオーバーで下線を表示させる(リンク)

    <a href="リンク先" target="_blank" style="text-decoration: none;"> <font size="-1" color="405050" onMouseOver="this.style.color='#dc143c'" onMouseOut="this.style.color = '#405050'"> 文字列</a></font> というタグで、マウスオーバーで文字色が変わるように しています。 下線を常時表示させてもいいのですが、 表示させると文字が読みにくくなってしまうので、 マウスオーバー時のみ下線を表示させ、 文字色も変えるタグはないでしょうか? 出来れば上記のようにタグに直接挿入する ものが希望です。よろしくお願いいたします。

    • ベストアンサー
    • HTML
  • javascript外部ファイル化の複数指定の質問です。

    javascript外部ファイル化の複数指定の質問です。 一つ目 ================================= try { document.execCommand('BackgroundImageCache', false, true); } catch(e) {} 二つ目 ================================= window.onload = function() { document.getElementById("home").onmouseover= function() {document.getElementById("sub_home").style.display="block"}; document.getElementById("home").onmouseout= function() {document.getElementById("sub_home").style.display="none"}; document.getElementById("sub_home").onmouseover= function() {document.getElementById("sub_home").style.display="block"}; document.getElementById("sub_home").onmouseout= function() {document.getElementById("sub_home").style.display="none"}; } この上記の2つのjavascriptを別々に外部ファイル化して、head内に読み込んでおります。 両方とも動作させたいのですが、下のwindow.onload のjavascriptしか動作しません。 両方、動作させるには、どのように記述すればよいのでしょうか? どなたか教えていただけませんか? よろしくお願い致しますm(_ _)m

  • 砂時計について教えてください。

    下のように記述すると、NN、Firefoxの最新版では特に何もないのですが、IEの最新版ではマウスカーソルを動かすたびに砂時計がチカチカと出る理由を教えてください。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <script type="text/JavaScript"> <!-- function over(){document.getElementById("menu0").style.display="block";} function over2(n){ for(i = 1;i < 2;i++){ document.getElementById("menu"+i).style.display="none"; } document.getElementById("menu"+n).style.display="block"; document.getElementById("menu"+n).style.top=(n*20)-20+"px"; } function out(n){ for(i = 1;i < 2;i++){ document.getElementById("menu"+i).style.display="none"; } } //--> </script> <table cellspacing="0" cellpadding="0"> <tr> <td valign="top"> <div id="menu0" style="display:none;"> <div onmouseover="over2(1)"><a href="url01.html">link01</a></div> </div> </td> <td valign="top"> <div id="menu1" style="display:none;" onmouseover="over2(1)" onmouseout="out(1)"> <div><a href="url11.html">link11</a></div> </div> <div id="menu2" style="display:none;" onmouseover="over2(2)" onmouseout="out(2)"> <div><a href="url21.html">link21</a></div> </div> <div id="menu3" style="display:none;" onmouseover="over2(3)" onmouseout="out(3)"> <div><a href="url31.html">link31</a></div> </div> </td> </tr> </table>

  • onmouseoverはCSS参照に含められるか?

    <div style="color: blue;" onmouseover="this.style.color='red'" onmouseout="this.style.color='blue'">あああ</div>を、 <style type="text/css"> <!-- div { onmouseover="this.style.color='red'"; onmouseout="this.style.color='blue'; } --> </style> みたいには書けませんか? a:hoverだったらできるのは承知していますが、 タグが<a>でなく<div>なので、onmouseover、onmouseoutを使わざるを得ず、 さらにonmouseover、onmouseoutはCSSでなくJSだと思うのですが。

    • ベストアンサー
    • CSS
  • 『オンマウスで説明文を表示』について

    http://lll.s21.xrea.com/m/link/38.html こちらのURLのタグを参考にしてやってみたところ、背景が半透明になってしまうのです。 すぐ上やすぐ下に文字が書いてあるので、ごちゃごちゃになって見えなくなってしまいます。 色々いじってみましたが、どうも上手くいきません。 どなたか、何処をどう変更するのか教えて頂けませんか? お願いします。 使用タグ↓ <SCRIPT language="JavaScript"> <!-- function up(text){ document.getElementById('te').innerHTML=text; set.style.posLeft =document.body.scrollLeft+window.event.clientX+10; set.style.posTop =document.body.scrollTop+window.event.clientY+10; document.all('set').style.display="block";} function kes(){document.all('set').style.display="none";} //--> </SCRIPT> <A HREF="○○.html" onmouseover="up('文章...')"; onMouseout="kes()">テストページ</A> <DIV style="display:none;position:absolute;filter:Alpha(opacity=70);" ID="set"> <TABLE BORDER=1 style="border-style:dotted" BORDERCOLOR="#333333" BGCOLOR="#E0E0E0" cellspacing=1 cellpadding=20> <TR><TD BGCOLOR="#FFE0E0"><SPAN ID="te"></SPAN></TD></TR> </TABLE> </DIV>

  • 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を利用しています。 どうか宜しくお願いします。

専門家に質問してみよう