JavaScript初心者のための文字をクリックして表示する方法とは?

このQ&Aのポイント
  • JavaScriptの初心者でも文字をクリックして表示する方法を知りたいです。
  • ラジオボタンではなく、普通の文字をクリックしたときに情報を表示したいです。
  • また、クリックした文字を指定した場所に表示する方法も教えてほしいです。
回答を見る
  • ベストアンサー

onclickで文字をクリックしたら下の方に文字を出す

 ラジオボタンならありましたが、ボタンをクリックしたときではなく普通の文字をクリックしたときに文字を出したいのですが出来ますか。 <input type="button" value="クリック1" onClick="document.all.div1.innerText='クリック1がクリック'"> <div id=div1></div> がラジオボタンで文字を表示する方法で <A onclick="javascript:location.href='index.html';">トップ</A>  トップをクリックしたらindexに移動する方法なのでこれを組み合わせれば出来ると思いますがなにせJavaScriptは初心者なものでよく分かりません。  それと文字を押したら「どこどこ」に出すと「どこどこ」の制御、例えばmarginで指定など出来ましたら教えてください。 長くて判りにくいですがどうぞよろしくお願いします。

  • golz
  • お礼率56% (13/23)

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

  • ベストアンサー
  • gura_
  • ベストアンサー率44% (749/1683)
回答No.2

>この出てきた「この指定位置に、この文字を表示」にリンクを張ることは出来ますか。  こういうことですか↓ <script type="text/javascript"> <!-- function func() { document.all.div3.innerHTML = "<a href='http://www.goo.ne.jp/'>goo topへ</a>"; } // --> </script> <A href="#" onclick="func(); return false;">100,200 にリンク先を表示</A> <div id="div3" style="position:absolute; top:100px; left:200px;"></div>

golz
質問者

お礼

凄いですね、ありがとうございました。

その他の回答 (1)

  • gura_
  • ベストアンサー率44% (749/1683)
回答No.1

 例えば、こういうことですか。↓ <A href="#" onclick="document.all.div2.innerText='指定位置に、この文を表示'; return false;">100,200 に文を表示</A> <div id="div2" style="position:absolute; top:100px; left:200px;"></div>

参考URL:
http://www.tohoho-web.com/js/element.htm#innerText, http://www.tohoho-web.com/how2/layout.htm#position
golz
質問者

お礼

ありがとうございます。出来ました。 それで一つ質問なんですが、「100,200 に文字を表示」を押して「この指定位置に、この文字を表示」が出てくるんですが、この出てきた「この指定位置に、この文字を表示」にリンクを張ることは出来ますか。

関連するQ&A

  • 新規ウインドウから他のページにいけますか?

    JavaScriptのwindow.openでページを表示した時に小さな別Windowも表示させるようにしています。 その画面を閉じるのに <input type="button" value="CLOSE" onclick="window.close()"> をクリックすると閉じるのですが、もう一つボタンを付けてそのボタンをクリックするとTOPページに戻るようにしたいんです。 location.href = "URL";で他のページにいけるんですよね? ボタンを表示させるには <input type="button" value="TOP" onclick="window.location.href="URL";"> でいいのでしょうか? やってみたのですが何も動きません。 どなたかわかる方、教えて頂けないでしょうか?よろしくお願いします。

  • ボタンをクリックして、リンクを開きたい

    ボタンをクリックして、リンクを開きたいのですが <input type="button" value="yahooを表示する" onClick="location=http://www.yahoo.co.jp/"> をしても何も起りません。 出来れば、新しいブラウザで開きたくて、 <A href="http://www.yahoo.co.jp/" target="HOGE">yahooを表示する</a> と同じように、ボタンをクリックして開きたいので、ご教授お願いします。

    • ベストアンサー
    • HTML
  • JavaScriptでIE上のボタンクリック

    JavaScriptの初心者でIE上で表示されたボタンをクリックしたいのですが、2つのボタンのうち1つをクリックしたいです。 「document.all("Buttonok").click();」,「document.getElementById("Buttonok").click();」と記入してみたのですが、エラーとなります。 下記のようなボタンをJavaScriptで押すにはどうしたらいいのでしょうか? どなたかすいませんがご教授ください。 ===================================================== ボタンのHTML ※formで囲まれてないです。 <table border="0" cellspacing="0" cellpadding="0" width="150"> <tr> <td width="50%"> <div id="Button"> <input type="buttonok" value="OK" class="Button" onclick="onClk("1");" /> </div> <div id="Button"> <input type="buttonng" value="NG" class="Button" onclick="onClk("0");" /> </div> </td> </tr> </table>

  • JavaScriptによるonClickの使い方

    JavaScriptのonClickと関数の使い方で悩んでいます。 現在、divブロック表示非表示切り替えスクリプト:http://designlabolatory.blog16.fc2.com/blog-entry-139.htmlを参考に、ボタンを押して内容の表示・非表示を行いたいと思っています。 <form name="btnname"> <input type="button" name="inpname1" value="▼" onClick="openclosebtn1()"> <div id="openclose1" style="display:none;">  内容:1 </div> <input type="button" name="inpname2" value="▼" onClick="openclosebtn2()"> <div id="openclose2" style="display:none;">  内容:1 </div> <input type="button" name="inpname3" value="▼" onClick="openclosebtn3()"> <div id="openclose3" style="display:none;">  内容:1 </div> </form> 上記のように1つのformの中で、複数の項目のボタンを押して表示・非表示を行うのに、 function openclosebtn1(){ } function openclosebtn2(){ } function openclosebtn3(){ } 3つの関数にそれぞれbuttonのnameとdivのidを変えて書いています。 これを、1つの関数にうまくまとめたいのですが、いまいち方法がわかりません。 JavaScript初心者で、勉強不足なのは重々承知です。 手元にある本を読んでも書き方がわかりません。 わかる方アドバイスお願いします。

  • onClickで2回目のクリックでもとの画像に戻す

    いつもお世話になっております。 JavaScriptで質問があり、投稿させていただきます! JavaScriptでサイドメニューを作成しています。 折りたたみにしていて、大メニューをクリックで小メニューを開くようにしています。 大メニューは画像で作成し、小メニューはテキストなのですが、 大メニューをクリックし、小メニューが開いたときに、大メニューの画像を変更。 大メニューをクリックし、小メニューを閉じたときに、大メニューの画像を元に戻す。 としたいのですが、うまくいきません・・・。 スクリプトとHTMLは以下です。 [[JavaScript]] <script type="text/javascript"><!-- function oritatami(id){ obj=(document.all)?document.all(id):((document.getElementById)?document.getElementById(id):null); if(obj) obj.style.display=(obj.style.display=="none")?"block":"none"; } //--></script> [[HTML]] <h2><a href="../sample/index.html" onclick="oritatami('o0');return false"><img src="image/fg.jpg" width="210" height="26" onclick="this.src='image/fg_on.jpg'" onlclick="this.src='image/fg.jpg'"/></a></h2> <div id="o0" style="display:none"> <ul> <li><a href="URL">Bible Flight</a> <li><a href="URL">Bible Flight</a> <li><a href="URL">Bible Flight</a> <li><a href="URL">Bible Flight</a> <li><a href="URL">Bible Flight</a> <li><a href="URL">Bible Flight</a> <li><a href="URL">Bible Flight</a> <li><a href="URL">Bible Flight</a> </ul> </div> これでは、1回目のクリックで大メニューの画像は変わるのですが、2回目のクリックでは何もわかりません・・・。 どなたか、ご存知の方、ご教授いただけないでしょうか!! よろしくお願いします!

  • JavaScriptのinput要素のonclick内で直接JavaS

    JavaScriptのinput要素のonclick内で直接JavaScript文を書きたい <input type="button" onclick="func()" value="ボタン"> のようにonclick内で関数を呼び出すことはできますが、 以下のようにスクリプトを直接書き込むのは可能でしょうか? (これは私が適当に考えただけなので多分動作はしませんが) <input type="button" onclick="javascript:( var a = 123; alert( a ); )" value="ボタン"> というのもちょっと試したいだけのときなど、 なるべく外部呼出しにしたくないことも多々あるもので・・

  • ネストされたdiv要素の中のa要素をクリック

    ネストされたdiv要素の中にa要素があるのですが、クリック出来ませんでした何かいい方法はありませんか? <div id="j,click"> <div> <section id="sample03"> <a class="button99 picture1 radius box_shadow" href="#" onclick="disp(99);return false;">戻る<a> </section> <div class="button99 lineargrad1"></div> <div class="box-area1-128 picture1-area1"></div> <div class="button99 linargrad2"></div> <div class="button99 shadow"></div> <div> <div> このように作成しました。 jQuery.biggerlinkではクリック出来るようになりましたが、javascriptの関数は呼び出すことは出来ませんでした。

  • Aタグを文字ではなくタグとして認識させたい…

    http://okweb.jp/kotaeru.php3?q=1422320でリンクをクリックすると押せなくなる処理を作りました。 しかし新たな問題が… 以下はソースです。 function linkcontrol(linkno) {  switch(linkno){   case 1:    slink1.innerText ='LINK1';    slink2.innerText ='<a href="javascript:linkcontrol(2)">LINK2</a>';    slink3.innerText ='<a href="javascript:linkcontrol(3)">LINK3</a>';    break;   case 2:    slink1.innerText ='<a href="javascript:linkcontrol(1)">LINK1</a>';    slink2.innerText ='LINK2';    slink3.innerText ='<a href="javascript:linkcontrol(3)">LINK3</a>';    break;   case 3:    slink1.innerText ='<a href="javascript:linkcontrol(1)">LINK1</a>';    slink2.innerText ='<a href="javascript:linkcontrol(2)">LINK2</a>';    slink3.innerText ='LINK3';    break;  } } //BODY部 <span id="slink1"><a href="javascript:linkcontrol(1)">LINK1</a></span> <span id="slink2"><a href="javascript:linkcontrol(2)">LINK2</a></span> <span id="slink3"><a href="javascript:linkcontrol(3)">LINK3</a></span> 上記の処理だと、リンクはクリックできなくなったのですが、他のリンクがリンクにならず文字で<a href~と書かれてしまいます。 これをきちんと文字ではなくタグとして認識させるには、どのような修正をすれば良いのでしょうか。 アドバイスお願いします。 ※そもそもこのソースはあまりよろしくない書き方のような気もします。 ※もしもっと簡単に行える書き方がありましたらそちらも併せてアドバイスをお願いします。

  • リンククリックで文字列を他のフレームへ

    リンクをクリックすると他のフレームにテキストを渡したい。現状はボタンクリックで渡しています。渡す文字は<SCRIPT language=JavaScript>の部分に書かず、リンクの場所においておきたい。 (例) <A HREF="">東京</A> <A HREF="">大阪</A> <A HREF="">名古屋</A> この文字の部分に 東京の名物、大阪の名物、名古屋の名物などのテキストを含ませておき、そことクリックすると別のフレームのテキストボックスに入るようにしたい。 #どうか、アドバイスを。 <form action="javascript:void(1)" onsubmit="return false;"> <p><input type=text name=Title value="やっほ"> <input type=button onclick="parent.Frame3.document.fm1.Title.value=this.form.Title.value;" value="←コピー">

  • CGIのリターンをjavascriptで受けるには

    はじめまして、よろしくお願いします。 呼び出すとある文字列を返すCGIがあるとして、呼び出すときは <button onclick="location.href=xxx.cgi" など何とかできるのですが、リターンの受け方がわかりません。 どこにどう戻ってくるのか見当がつきません。 調べてみましたがjavascriptではできるのかどうかすらよくわからなかったので、可能か不可能か、可能ならばその簡単な方法を教えていただけると嬉しいです。よろしくお願いします。

専門家に質問してみよう