DOMによる、テキストエリアの内容の書き換え
- ボタンがクリックされたとき、テキストエリアボックスの内容が書き換わる
- ボタンをクリックしても、テキストエリアが書き換わりません
- elm[0].Valueでは、駄目なのでしょうか。
- ベストアンサー
DOMによる、テキストエリアの内容の書き換え
以下コードを記述し、test.htmlで保存しました。 「ボタンがクリックされたとき、テキストエリアボックスの内容が書き換わる」 と言うことを想定し、作成してみました。 ところが、ボタンをクリックしても、テキストエリアが書き換わりません。 elm[0].Valueでは、駄目なのでしょうか。 ボタンをクリックしたとき、関数までは動いていることは確認できたのですが。 (alertで確認済み) ご教授お願いします。 ==========以下内容====== <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title>テキストエリア書き直し</title> </head> <body> <h1>テスト</h1> <p>テキストエリアの書き換え</p> <script type="text/javascript"> <!-- function syutoku(){ var elm=document.getElementsByName('textarea1'); elm[0].Value="書き直し"; //alert(elm[0]); } --> </script> <hr> <p>テキストエリアを書き直します。</p> <form name="form1"> <p><input type="button" value="ボタン" onClick="syutoku()"></p> <p><textarea cols="40" rows="4" name="textarea1"> テキスト書き直しエリア</textarea></p> </form> <hr> </body> </html>
- ShiftTail
- お礼率80% (423/528)
- JavaScript
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
こんにちは。 elm[0].Value="書き直し"; は elm[0].value="書き直し"; が正しいです。 valueはすべて小文字です。
その他の回答 (1)
- notnot
- ベストアンサー率47% (4848/10262)
誤： elm[0].Value="書き直し"; 正： elm[0].value="書き直し";
お礼
早速情報ありがとうございます。 No1さんと同じ内容でしたので、同じ結果が得られました。 ありがとうございました。
関連するQ&A
- テキストエリア内で改行するには。
次のスクリプトを実行すると、テキストエリア内に 01234560 と数字が表示されますが、これを 0 1 2 . というように改行も含めてテキストエリアに出力するにはどうすればよいでしょうか。 ￥ｎという文字を使用するのでしょうか？ <html> <head> <script language="JavaScript"> <!-- var textA="" function my1() {for (i=0;i<11;i++){textA=textA+new String(i)} document.form1.text1.value=textA;} //--> </script> </head> <body> <form name="form1"> <textarea name="text1" size="10"></textarea> <input type="button" value="CLICK!" onClick="my1();"> </form> </body> </html>
- ベストアンサー
- JavaScript
- テキストエリア文字制限について
テキストエリア文字制限について 失礼します。 javascript初心者です。 複数のテキストエリアの文字制限を行いたく 苦戦しております。 いろいろと検索してみましたが・・・ 2日ほど悩んでおります。 AとBでエラーが出た場合はCGIに流れず入力フォームに戻るのですが Bでエラーが発生しない場合CGIに流れてしまいます。 ですの文字数制限をしても結局CGIに流れてしまうのですが どのように記述すればよろしいでしょうか？？ なんとか・・・ご教授いただければ幸いです。 よろしくお願いいたします。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title>入力文字数の制限</title> <script language="javascript" type="text/javascript"> <!-- var MAXLENGTH = 10; //入力許容最大文字数 function tareachk(frm){ var tmp = frm.vin1.value; var len = tmp.length; if(len > MAXLENGTH){alert("A入力可能な文字数は"+MAXLENGTH+"文字までです");} var tmp = frm.vin2.value; var len = tmp.length; if(len > MAXLENGTH){alert("B入力可能な文字数は"+MAXLENGTH+"文字までです");} else{frm.submit();} } // --> </script> </head> <body> <form action="ccccc.cgi" method="post"> <textarea name="vin1" rows="5" cols="30">10文字まで入力可能</textarea><br> <textarea name="vin2" rows="5" cols="30">10文字まで入力可能</textarea><br> <input type="button" value="GO" onclick="tareachk(this.form);"> </form> </body> </html>
- ベストアンサー
- JavaScript
- テキストエリアの選択行番号を返す関数
下記のようなJavaScriptで、削除ボタンが押されたときにテキストエリアの何行目が 選択されているかを返す関数を作成途中なのですが、残りの部分がわかりません。 どうすれば、実現できるのか教えていただけないでしょうか。 <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>ホームバンキング</title> <script language="javascript"> <!-- document.form1.display.focus(); // テキストエリアにまずフォーカスを与える function select_row(){ // テキストエリアの何行目がクリックされているかを返す関数 var textarea = document.getElementById('display'); // テキストエリアのHTMLエンティティを取得 for(var i=0; i<textarea.length; i++){ if() break; // テキストエリアのi行目が選択されていたら、 } //document.form1.display.select(); // テキストエリアを選択状態にする return i; } //--> </script> </head>
- ベストアンサー
- JavaScript
- documentオブジェクトについて
以下ページを作成しました。 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title>テストページ</title> </head> <body> <h1>テストページ</h1> <p>筆記用具を3つ下に表示します。</p> <script type="text/javascript"> <!-- document.write("鉛筆,消しゴム,定規"); --> </script> <hr> <p>ボタンを押すと食べ物、飲み物を表示します</p> <p><input type="button" value="表示" onclick="document.textarea1.value='米、パン、お茶"></p> <p><textarea cols="40" rows="4" name="textarea1"></textarea></p> <hr> </body> </html> ==============↑ここまで 質問：documentオブジェクトの使い方がわからないのです。 検証：動作を調べようとして以下検証しました ・検証1 上記ソース最後部分の、 <input type="button" value="表示" onclick="document.textarea1.value='米、パン、お茶">を 押すことで、textareaに「米、パン、お茶」を表示したいのですが、 documentがついたままだと、エラーを吐き、documentを抜いた、「textarea1.value」で実行するとエラーにならないのです。 なぜ、documentがあるとエラーになるのでしょうか。 documentは、現在表示されているページの全体をさしている(キャンバスみたいなかんじで)と認識しています。 そのドキュメント上にtextarea1があるので、document.textarea1.valueはエラーにならないと踏んだのです。 ・検証2 次に、ドキュメント上にForm１をひとつ作成し、その中にテキストエリアを作成しました。 form1タグを付けたので、「document.form1.textarea1.value」と考え、実行したところ textare1の中に、文字が表示されエラーにはなりませんでした。 ・検証1と2より よって、documentは、formがないとエラーになるのかと考えました。 ●別項目学習中に しかし参考書の途中別項目で、「document.three.src="画像ファイル"」 と、documentの次の「three」はimgタグのnameなのですが、エラーがでず実行されました。 なぜ、 「document.three」というのがきてもエラーにならないのでしょう。 ・質問 「document.textarea1.value」と「document.three.src="画像ファイル"」では 何が違うのでしょうか。documnetの後ろに来てるものは、同じオブジェクトだと思うのですが。 テキストエリアタグと、imgタグで、documentの書き方が変わるのでしょうか。 どなたかお分かりの方がいらっしゃいましたら ご教授お願いします。
- ベストアンサー
- JavaScript
- Javascriptで複数のテキストエリアの文字列を連結させたいです
Javascriptで複数のテキストエリアの文字列を連結させたいです。 初めまして、 お世話になります。 ------------------------------------------------- <html> <head> <title>無題ドキュメント</title> <meta http-equiv="Content-Type" content="text/html; charset=EUC-JP"> </head> <body bgcolor="#FFFFFF" text="#000000"> <form name="form1" method="post" action=""> いつ<br> <textarea name="when"></textarea> <br> <br> どこで<br> <textarea name="where"></textarea> <br> <br> だれが<br> <textarea name="who"></textarea> <br> <br> どうした<br> <textarea name="what"></textarea> <br> <input type="submit" name="submit" value="連結"> <input type="reset" name="submit" value="リセット"> <br> <br> いつどこでだれががどうした。<br> <textarea name="textfield"></textarea> </form> </body> </html> ------------------------------------------------- というHTMLがあったとして ボタンを押したら文字列を連結させたいのです。 その際、入力したテキストフィールドで文字列が改行をされてあった場合 それをそのまま反映して表示させたいのです。 ぜひよろしくお願いします。
- ベストアンサー
- JavaScript
- 追加したテキストボックスとテキストエリアの数の制御
下記のようにテキストボックスとテキストエリアの数をボタンを押すことによって増やしていきます。 で、テキストボックスとテキストエリアは最大10個までとしたいのですが、どのようにしたらいいでしょうか？ あとテキストエリアを追加していくとテキストエリアとテキストエリアの間が詰まってしまいます。間を空ける方法はないでしょうか？ <script type="text/javascript"> function myAdd(){ var oTR=document.createElement("tr"); var c=count("mat"); var names=["mat","qua"]; for(var i in names){ var oTD = document.createElement("td"); var oTag = document.createElement("input"); oTag.setAttribute("type", "text"); oTag.setAttribute("name", names[i] + (c+1).toString()); oTD.appendChild(oTag); oTR.appendChild(oTD); } document.getElementById("t0").getElementsByTagName("tbody")[0].appendChild(oTR); } function count(name){ var tags=document.getElementsByTagName("input"); var c=0; var reg=RegExp("^"+name+"[0-9]+$"); for(var i=0;i<tags.length;i++){ if(tags[i].name.match(reg)){ c++; } } return c; } var tag_num = 4; function myTextAreaAdd(){ var oTag = document.createElement("textarea"); oTag.setAttribute("name", "foo" + tag_num++); var oDiv = document.getElementById("area"); oDiv.appendChild(oTag); } </script> </head> <body><form method="post" enctype="multipart/form-data" action="check.php"> <table id="t0" border> <tbody> <tr><td><input type="text" name="mat1" value=""></td> <td><input type="text" name="qua1" value=""></td> </tr> <tr><td><input type="text" name="mat2" value=""></td> <td><input type="text" name="qua2" value=""></td> </tr> <tr><td><input type="text" name="mat3" value=""></td> <td><input type="text" name="qua3" value=""></td> </tr> <tr><td><input type="text" name="mat4" value=""></td> <td><input type="text" name="qua4" value=""></td> </tr> </tbody> </table> <input type="button" value="追加する" onClick="myAdd()"> <br /> <span id="area"> <textarea name="foo1"></textarea> <textarea name="foo2"></textarea> <textarea name="foo3"></textarea> <textarea name="foo4"></textarea> </span><br /> <input type="button" value="追加する" onClick="myTextAreaAdd()"><br /> </form>
- 締切済み
- JavaScript
- テキストエリアにテキストファイルを改行コードごと読み出すには
ただ今勉強中のCGIを使って、テキストファイルの編集・上書き保存をテキストエリアから行いたいのですが、テキストエリアに読み込む時に改行コードが読み込めないためか、最後の一行しか表示できません。どのようにすると、改行コードを含めて編集できるのでしょうか？ その「できないコード（サブルーチン）」は↓になります。 $commentfile = "comment.txt"; ■ 読み出し sub read_commentfile { local($masg); open(IN, $commentfile); while (<IN>) {$masg = join('',$_); $massage = $masg; } close(IN); } ■ コメントの編集画面 sub comment { local($html); &read_commentfile; #HTML作成 $html = << "EOM"; <html lang="ja"> <head> <meta http-equiv="content-type" content="text/html; charset=$charset"> <title>コメントの編集</title> </head> <body> <form action="$self" method=post> <input type=hidden name=mode value="savecomment"> <hr> コメント<br> <textarea name=masg cols=40 rows=4>$massage</textarea> <br> <input type=submit value=" 更新 "> </form> <hr> </body> </html> EOM &print_html($html); } ■ 上書き保存 sub savecomment { local(@text); push(@text, "$FORM{'masg'}\n"); open(OUT, ">$commentfile"); print OUT @text; close(OUT); } 本来でしたら、ファイルのロック・解除、表ダグ、パスワード等の記述もあるのですが、省いてあります。 よろしくお願い致します。
- ベストアンサー
- CGI
- オンマウスでテキストエリアにテキスト表示
現在、「猫」という文字にカーソルを合わせると text1のテキストエリアに 「ニャンと鳴く」と表示されるスクリプトを作成しました。 記述の一部ですが下に示します。 <form name="form1"> <TEXTAREA name="text1" rows="5" cols="40"></TEXTAREA> </form> <span onmouseover="txt_dsp('text1','ニャンと鳴く');"onmouseout="txt_dsp('text1', '');">猫</span><br> 教えていただきたいのは'ニャンと鳴く'という部分を msg.txtというテキストファイルに書かれた'ニャンと鳴く' で表示したいのですが、どのような記述にしたらよろしいでしょうか？ よろしくお願い致します。
- ベストアンサー
- JavaScript
- textareaに文字列を追加する方法
JavaScript超初心者です。初めて質問します。 2つのテキストエリアに入力されたものを、3つ目のテキストエリアに文字を追加して、入力するスクリプトを作ろうとしています。 ネットで似たようなものを見つけてきて、アレンジしてみたのですが、2つ目の文字を入力するためのボタンをクリックすると、1つ目の文字が消えてしまいます。 姓：AAA/名：BBB と続けて追加されるようにするには、どうしたらよいのでしょうか？ どなたかお助けください。よろしくお願いいたします。 ＜作成中のページ＞ <html> <head> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <META http-equiv="Content-Style-Type" content="text/css"> <title></title> <script language="JavaScript"><!-- function setData() { txt1= document.form7.t1.value; document.form7.list.value = "姓："+ txt1; } function setData1() { txt2= document.form7.t2.value; document.form7.list.value = "名："+ txt2; } // --></script> </head> <body> <form name="form7"> 姓<TEXTAREA name="t1" size="10" rows="1"></TEXTAREA><input type="button" value="済" onClick=setData()><br> 名<TEXTAREA name="t2" size="10" rows="1"></TEXTAREA><input type="button" value="済" onClick=setData1()><br> <textarea rows="9" cols="20" name="list"></textarea><br> </form> </body> </html>
- ベストアンサー
- JavaScript
- テキストエリアに履歴を残したい
以下のスクリプトではテキストエリアにボタンを押した時刻が、その都度表示されるだけです。複数回ボタンを押したときに履歴が残るようにしたいのですが難しいでしょうか？ <html> <head> <title>履歴</title> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <script type="text/javascript"><!-- myDate = new Date(); Y = myDate.getFullYear(); M = myDate.getMonth() + 1; D = myDate.getDate(); myTime = new Date(); H = myTime.getHours(); m = myTime.getMinutes(); S = myTime.getSeconds(); L = Y + "年" + M + "月" + D + "日" + H + "時" + m +"分" + S + "秒\n" function myFunc(){ myDate = new Date(); Y = myDate.getFullYear(); M = myDate.getMonth() + 1; D = myDate.getDate(); myTime = new Date(); H = myTime.getHours(); m = myTime.getMinutes(); S = myTime.getSeconds(); Log = Y + "年" + M + "月" + D + "日" + H + "時" + m +"分" + S + "秒\n" document.myForm.Log.value = Log; } //--> </script> </head> <BODY> <CENTER> ボタンを押すと履歴が表示されます。 <form name="myForm"> <input type="button" value="PUSH" onClick="myFunc()" STYLE="font-size: 16pt;"> <P> <textarea name="Log" cols="50" rows="15" STYLE="font-size: 16pt;"> PUSH履歴が表示されます。 </textarea> </form> </CENTER> </body> </html> 宜しくお願いします。
- ベストアンサー
- JavaScript
お礼
早速情報ありがとうございます。 試してみたところ、書き換わりました。 value 小文字じゃないと駄目なんですね・・・。 助かりました。 ありがとうございました。