- ベストアンサー
クリックすると別の文章を表示する
javascriptでいくつかの文字をクリックするとその文字に対する文章が表示されるようにしたいのですが、どのように記述すればよいのでしょうか？どなたかご教授お願いします
- vect-61
- お礼率68% (17/25)
- JavaScript
- 回答数3
- ありがとう数2
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
<script type="text/javascript"> function textChange(id,text){ var span_el = document.getElementById(id); var originalText = span_el.firstChild.nodeValue; span_el.innerHTML=text; return originalText; } </script> <div onClick="textChange('mytext','表示させたいHTML')">クリックされる文字</div> <br><br> <span id="mytext"> 変更したい場所 </span> これでいかがでしょうか。 変更後のHTMLの文章は改行してはいけないので、外部ファイルで text01 = "HTMLの文章（文章内の"は\"と記述）" とかしておいて読み込むとかなりすっきりします。
その他の回答 (2)
還暦目前の服飾デザイナでプログラマではありません。 ですから、私が示せるサンプルは次が限界。 それに質問の意図も余り理解できていません。 そういう事情で色んな問題、色んな改善点を含んでいると思います。 そこは、プロの回答者にお聞きになって下さい。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <html> <title>文章の表示</title> <meta http-equiv="Content-script-Type" content="type"> <script type="text/javascript"> var petdogs = new Array(3); petdogs[0]="シベリアンハスキーには、独特の美しさがあります。" + "子犬ならば、なおさらのことです。"; petdogs[1]="最愛のシベリアンハスキーでした。"; petdogs[2]="同年春に我が家へやってきたゴールデンレトリバーのです"; function update_val(objects, new_value) { objects.value = new_value; } </script> <body> <form name="main"> <span onclick="update_val(document.main.message, petdogs[0]);return true"><u>1,AAAA</u></span></br> <span onclick="update_val(document.main.message, petdogs[1]);return true"><u>2,BBBB</u></span></br> <span onclick="update_val(document.main.message, petdogs[2]);return true"><u>3,CCCC</u></span></br> <p> <textarea name="message" id="message" rows="3" cols="50" readonly="readonly"></textarea><br/> </form> </body> </html>
補足
ご回答ありがとうございます。 思い通りにはできたのですが、テキストエリアを使わずにhtmlにそのまま表示するようにしたいのです。 説明が不十分で申し訳ありませんでした。
- HIRSYU
- ベストアンサー率51% (45/87)
<span onclick="文章を表示するJavascript">クリック対象文字</span> クリックに反応させる文字を↑のようなタグで囲って、onclickイベントで文章を表示するJavascriptを実行させるのはどうでしょう？
補足
ご回答ありがとうございます。 調べてみたところその方法でできそうです。 まだjavascript勉強不足なので調べながらやってみようと思います。 ありがとうございました
お礼
外部ファイルとして読み込む方が楽そうですね 参考になりました。ありがとうございました。