JavaScript初心者がレイヤーに文字列を書き出す方法は？

前へ 次へ
このQ&Aのポイント
  • JavaScript初心者が、ページ全体でなくレイヤーに文字列を書き出す方法を教えてください。
  • 質問者はJavaScriptの関数にdocument.write(string)を使用して文字列を書き出したいと考えていますが、ページ全体に書き出されてしまいます。レイヤーの文字のみ変更するためにはどのようにすればよいのでしょうか。
  • 質問者はHTML内の特定のレイヤーに文字列を書き出したいと考えており、JavaScriptのdocument.write(string)関数を使用しています。しかし、現在の方法ではページ全体に書き出されてしまいます。レイヤーの文字のみを変更するためには、どのような方法がありますか？
回答を見る
  • ベストアンサー

レイヤーに書き込むには

JavaScript 初心者ですが、 document.write(string); が含まれる関数を呼び出してレイヤーに文字列を書き出したいのですが、ページ全体に書き出されてしまいます。レイヤーの文字のみ変更するにはどうすればよいのでしょうか。 <html> <head> </head> <body> <div id="layer1"> <script type="text/javascript"> <!-- function function1() { document.write("Hello, World!"); } //--> </script> </div> <input type="button" onclick="function1()" /> </body> </html> よろしくお願いします。

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

  • ベストアンサー
  • yambejp
  • ベストアンサー率51% (3827/7415)
回答No.1

こういうことですか？ <script type="text/javascript"> function function1() { document.getElementById('layer1').innerHTML="Hello, World!"; } </script> <div id="layer1"></div> <input type="button" onclick="function1()" />

KanjiTalk
質問者

お礼

ありがとうございます、うまく動きました。

KanjiTalk
質問者

補足

できれば document.getElementById('layer1').innerHTML="Hello, World!"; について解説していただけませんか。

その他の回答 (1)

  • yambejp
  • ベストアンサー率51% (3827/7415)
回答No.2

HTMLはオブジェクトにユニークなidをつけて管理できます。 idがわかっている場合getElementByIdでオブジェクトに アクセスできます。 今回はlayer1というidのdivタグ（オブジェクト）に対して innerHTML＝内容をすべて書き換えたわけです。 googleかyahooで「getElementById」で検索して ご自身でわかるまで調べてみるとよいでしょう。 調べる癖をつけないと上達しませんよー

KanjiTalk
質問者

お礼

なるほど、わかりやすい解説をありがとうございました。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • レイヤーにある画像を変更したいです。

    ボタンを押したらレイヤー内の画像を変更したいのですが 可能でしょうか？ レイヤーでなければできるのですが・・ <html> <head> <SCRIPT language=JavaScript> <!-- function a(fishimg){ document.getElementById('layer1').images[0].src = fishimg; } //!---> </SCRIPT> </head> <body> <form name="form1"> <input type="button" onClick="a('fish2.gif')" value="レイヤーの画像を変えます。"> </form> <DIV id="layer1"> <IMG src="fish.gif"> </DIV> </body></html>

  • レイヤー内のフォームの内容を変更するにはどうすれば？

    JavaScriptを使って,テキストボックスに書かれている内容を変更できる様にしたいいのですが,フォームがレイヤー内にあるとうまく出来ません。 こちらがソースです。あくまで例です。ボタンをクリックすると書かれている内容が変わります。 <html> <head> <script lauguage="javascript"> function Form_Write(){ document.form.box.value="Click=true"; } </script> </head> <body> <div id=layer style="position:absolute;left:50px;top:50px;"> <form name="form"> <input type="text" name="box" size=20 value="Click=false"> <input type="button" name="button" value="click" onClick="Form_Write()"> </form> </div> </body> </html> これだとIEではうまく作動するのですが,NNだとうまく動きません。 document.layer.form.box.valueにしてもダメです。 document.layer.form has no propertiesというエラーが出ます。 どうすれば出来るのでしょうか？お助け願います。

  • JavaScript表示切替の問題

    ボタンを押すたびに、こんにちはとこんばんはが切り替わるようにしたいのですが、 切り替わりません。なぜかわかる方がいたら教えて頂けると助かります。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> </head> <body> <div id="1">こんにちは</div> <input type="button" value="切替" onclick="func_switch()"> <script language="javascript" type="text/javascript"> function func_switch(){ if(document.getElementById(1).innerHTML="こんにちは"){ document.getElementById(1).innerHTML="こんばんは"; } else{ document.getElementById(1).innerHTML="こんばんは"; } } </script> </body> </html>

  • ドキュメントを自ウィンドウに書き出したい

    <html> <head> <script language="JavaScript"> <!-- function doc() { document.write("JavaScript"); } //--> </script> </head> <body bgcolor="#ffffff"> <form name="form1"> <input type="button" value="ボタン" onClick="doc()"> </form> </body> </html> 上のプログラムの場合ボタンを押すとボタンが消えJavaScriptと書き出されてしまうのですが、ボタンの下に書き出すにはどうしたらよいのでしょうか？結果として以下のように表示させたいのですがどうしたらよいのでしょうか？ <html> <head> </head> <body bgcolor="#ffffff"> <form name="form1"> <input type="button" value="ボタン"> <p>JavaScript</p> </form> </body> </html> これらのプログラムは自作のものです。

  • 引数付きで呼び出す関数・配列・name(id)のつけ方・・・？

    引数付きで呼び出す関数・配列・name(id)のつけ方・・・？ 何を質問したいのかわからないタイトルになってしまいましたが とりあえず下のソースコードを見てください(実行してください)。 <html> <head><title>up</title> <script language="JavaScript"> <!-- num=new Array("5","5"); str=new Array("*****","*****"); function up(j) { num[j]++; str[j]+="*"; text[j].innerHTML=num[j]+str[j]; } //--> </script> </head> <body> <input type="button" value="1" onClick="up(0)"><div id="text1">5*****</div><br> <input type="button" value="2" onClick="up(1)"><div id="text2">5*****</div> </body> </html> １のボタンを押すと上の文字列が反応し、２のボタンを押すと 下の文字列が反応するプログラムを書きたいのですが、どっちの ボタンを押して関数が呼び出され、どっちの文字列に処理を するか区別することができません、どうしたらよいのでしょうか？ 下のようにひとつの時はできました・・・。でもふたつの時は どうしたらいいのかわかりません。 <html> <head><title>up</title> <script language="JavaScript"> <!-- num=5; str="*****"; function up() { num++; str+="*"; text1.innerHTML=num+str; } //--> </script> </head> <body> <input type="button" value="1" onClick="up()"><div id="text1">5*****</div> </body> </html>

  • javascriptの動的読み込みについて教えてください

    javascriptの動的読み込みについて教えてください いつもお世話になります。 jqueryを勉強中のものです。 少しややこしいのですが、 以下のmenu.htmlとmain.htmlを持ったframe.htmlで、メニューの試験ボタンを押してmain.htmlの<div id="target_id">にload.htmlを動的に読み込んだ時、loadされたhelloボタンが作動しません。 menu.htmlのtest()中のalert(data);でload.htmlの<script>が読み込まれていることは確認できるのですが・・何が原因でどこが悪いのでしょうか？ よろしくご指導お願いします。 frame.html ----------------------------------------------------------- <html> <head> <title>Dynamic Load Test</title> </head> <frameset name="frame" cols="180,*"> <frame name="menu" src="menu.html"> <frame name="MainPanel" src="main.html"> </frameset> </html> ----------------------------------------------------------- menu.html ----------------------------------------------------------- <html> <head> <script src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript"><!-- function test(){ jQuery.get("./load.html",function(data){ alert(data); $("#target_id",window.parent.MainPanel.document).html(data); }); } // --></script> </head> <body> <button onClick="test();">試験</button> </body> </html> ----------------------------------------------------------- main.html ----------------------------------------------------------- <html> <head> </head> <body> <h1>main.html</h1> </body> <div id="target_id"></div> </html> ----------------------------------------------------------- load.html ----------------------------------------------------------- <h1>load.html</h1> <script type="text/javascript"><!-- function hello(){ alert("こんにちわ"); } // --></script> <button onClick="hello();">hello</button> -----------------------------------------------------------

  • ブラウザ依存？　html JavaScript textboxの値の渡し方

    <html> <head> <script type="text/javascript"> function print(arg){ document.getElementById("out").innerHTML = "<br/>" + arg; } </script> </head> <body> <input type="textbox" name="text1"/><br/> <input type="button" value="print" onclick="print(text1.value)"/> <div id="out"></div> </body> </html> 上記は、textboxに入力した文字列を[print]ボタンを押下すると表示するhtmlです。IE6.0では期待通りに動作するのですが、Firefox/2.0では動作しません。 ブラウザに依存しない様にはどこを直せばよいですか？

  • jQuery 動的にボタンが増えた時

    <html> <head> <title>js sample</title> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> jQuery(document).ready( function() { $(".button_cls_1").click(function(){ alert('hello world! button 1'); }); $(".button_cls_2").click(function(){ alert('hello world! button 2'); }); }); </script> </head> <body> <input class="button_cls_1" type="button" value="テスト１" /> <input class="button_cls_2" type="button" value="テスト２" /> </body> </html> 上記のようなスクリプトでbutton_cls_1、button_cls_2が動的に増えた時に どのように書いたらいいかわかりません。 button_cls_1、button_cls_2、button_cls_3、button_cls_4の時もあれば button_cls_1、button_cls_2の時もあります。

  • ボタンを押したらテキストボックスの文字色をチェンジ

    ボタンをクリックしたらテキストボックスに入っている文字色を黒から赤に変えたいんですがどのようにしたらいいでしょうか？ 一応、自分なりに作ってみたものです。エラーがでます。 保存ファイルの拡張子は「ｈｔｍｌ」です。 ------------------------------------------------------- <html> <head> <script language="javascript"> function change(){ document.form1.text1.fgcolor="red"; } </script> </head> <body> <input type="text" value="文字色" name="text1"> <input type="button" value="押す" onClick="change()"> </body> </html> ----------------------------------------------------------

  • ボタンを押すたびに画像を切り替えるには？

    まずソースを載せます↓ <html> <head> <meta http-equiv="Content-Script-Type" content="text/javascript"> <meta http-equiv="Content-type" content="text/html; charset=shift-jis"> <title>ボタンを押すたびに画像を表示します</title> <body bgcolor="#FFFFFF"> <script type="text/javascript"> function func1(str) { document.write('<img src="c:/MyImage/dog1.jpg" width="104" height="91" />'); } function func2(str) { document.write('<img src="c:/MyImage/dog2.jpg" width="104" height="91" />'); } function func3(str) { document.write('<img src="c:/MyImage/dog3.jpg" width="104" height="91" />'); } function func4(str) { document.write('<img src="c:/MyImage/dog4.jpg" width="104" height="91" />'); } </script> </head> <body bgcolor="#FFFFFF"> <form id="myForm" name="myForm"><p> <input type="button" value="ボタン1" name="button1"onclick="func1('dog1.jpg');"> <input type="button" value="ボタン2" name="button2"onclick="func2('dog2.jpg');"> <input type="button" value="ボタン3" name="button3"onclick="func3('dog3.jpg');"> <input type="button" value="ボタン4" name="button4"onclick="func4('dog4.jpg');"> </p></form> </body> </html> 今回の質問内容はボタンを押すたびに画像を表示するjavascriptプログラムです 画像はCドライブ直下のMyImageフォルダにdog1.jpg,,dog2.jpg,dog3.jpg, dog4.jpgを入れています なんで動かないのがわからないです 回答できたらよろしくお願いします

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する