プロが教えるわが家の防犯対策術!

javascriptでいくつかの文字をクリックするとその文字に対する文章が表示されるようにしたいのですが、どのように記述すればよいのでしょうか?どなたかご教授お願いします

A 回答 (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の文章(文章内の"は\"と記述)"
とかしておいて読み込むとかなりすっきりします。

参考URL:http://dospara.okwave.jp/qa3616054.html
    • good
    • 0
この回答へのお礼

外部ファイルとして読み込む方が楽そうですね
参考になりました。ありがとうございました。

お礼日時:2007/12/28 23:52

還暦目前の服飾デザイナでプログラマではありません。


ですから、私が示せるサンプルは次が限界。
それに質問の意図も余り理解できていません。
そういう事情で色んな問題、色んな改善点を含んでいると思います。
そこは、プロの回答者にお聞きになって下さい。

<!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にそのまま表示するようにしたいのです。
説明が不十分で申し訳ありませんでした。

補足日時:2007/12/28 20:31
    • good
    • 0

<span onclick="文章を表示するJavascript">クリック対象文字</span>


クリックに反応させる文字を↑のようなタグで囲って、onclickイベントで文章を表示するJavascriptを実行させるのはどうでしょう?

この回答への補足

ご回答ありがとうございます。
調べてみたところその方法でできそうです。
まだjavascript勉強不足なので調べながらやってみようと思います。
ありがとうございました

補足日時:2007/12/28 20:35
    • good
    • 1

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!