• 締切済み

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

ボタンをクリックしたらテキストボックスに入っている文字色を黒から赤に変えたいんですがどのようにしたらいいでしょうか？ 一応、自分なりに作ってみたものです。エラーがでます。 保存ファイルの拡張子は「ｈｔｍｌ」です。 ------------------------------------------------------- <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> ----------------------------------------------------------

noname#53923
noname#53923

みんなの回答

noname#24096
noname#24096
回答No.2

×document.form1.text1.fgcolor="red"; ○document.form1.text1.style.color="red";

noname#53923
質問者

お礼

おぉ～うごいたぁーｗ 本当にありがとうございました(*￣∀￣*)

  • STICKY2006
  • ベストアンサー率29% (1536/5269)
回答No.1

こんちは。 んー。おしいな。。。 <input type="text" value="文字色" name="text1"> <input type="button" value="押す" onClick="change()"> あたりが問題ですかね。 <input>を使う際には、必ず<form>タグが必要になります。 <input>は、必ず<form>～</form>の中になくてはいけません。この場合、 <form name ="form1"> <input type="text" value="文字色" name="text1"> <input type="button" value="押す" onClick="change()"> </form> となります。 ちなみに、<input>だけでなく、<select>とか<option>とかもですけどね。 <form name ="form1"> とすることで、上のJavaScriptの「document.form1.text1」が指定できるようになります。

noname#53923
質問者

補足

回答ありがとうございます。 <form></form>タグで囲んでみたらエラーはでなくなりました。 でも、テキストボックスの文字の色が変わりません。 どうしたらいいですか？

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

関連するQ&A

  • クリックするとボタンの中の文字が変わるようにしたいんですが一応コードは出来たんですが・・うまくうごかなくて困ってます。

    java スクリプトのONCLICKについて質問があります。 ONCLICKのあとに何個もオプションはつけられないのでしょうか？ <INPUT TYPE="button" VALUE=" " ONCLICK="form1.Q8.value += '1';" style="font-size:40pt"><br> にボタンをクリックするとボタンの中に「○」を表示するようにしたいんですが、うまくいきません・・・ 一応こう感じにつくってみたんですが・・・ <html> <head> <title></title> </head> <body> <script type="text/javascript"> function change_label(){ document.form1.label1.value = " ○　"; } </script> <form name="form1"> <input type="hidden" name="Q8" value=""><br> <input type="button" name="label1" value="クリックしてね" onclick="form1.Q8.value += '1';change_label();"> <input type="submit" name="Q9b" value="次へ" style="font-size:25pt"> </form> </body> </html> もしよろしければアドバイスいただけませんでしょうか・・・・

  • テキストボックスに文字飾り表示（２の３乗）が出来ない。

    テキストボックスに文字飾り表示（２の３乗）が出来ない。 　JavaScriptを使用しテキストボックスに上付き、下付き文字を表示したいのですが上手く表示しません。HTMLのコードが出てしまいます。下記簡単なコードを添付しますので、何方か正しい表示方法を教えてください。 参考までにコード中(1)は正しく表示できず（テキストボックス中）、(2)は正しく表示します。（非テキストボックス） <HTML> <HEAD> <SCRIPT language="JavaScript"> function disp(){ var c=new Array("2"+"3".sup(),"1","2"); document.tm.a1.value=c[0]; // (1) document.write(c[0]); // (2) } </SCRIPT> </HEAD> <body> <FORM name="tm"> <INPUT type="button" value="" onClick="disp()"> <INPUT name="a1" type="text" size="20" width="10"> </FORM> </body> </HTML>

  • 入力した文字をalertで表示するスクリプトを作っています。

    入力した文字をalertで表示するスクリプトを作っています。 以下、IEとOperaでは動作しますが、FirefoxとGoogle Chromeでは動作しません。 書き方が悪いのでしょうか？ <html> <head> <script language=JavaScript> <!-- function test(){ alert(input1.value); } // --> </SCRIPT> </HEAD> <BODY> <input type="text" name="input1"> <input type="button" value="テスト" onClick="test()"> </html>

  • 文字をテキストフィールドに記入する。

    ボタンを押したら、その文字がテキストフィールドに記入されていく、といったスクリプトを作りたいのですが、どうもうまくいきません。 以下がとりあえず作成したスクリプトですが、ここからどのようにすれば、うまく出来るでしょうか？ とりあえずしたい事は、例えば、「野菜」「肉」「魚」と順にボタンを押すと、テキストフィールドに「野菜　肉　魚」と記入されていくようにしたいのですが。 今の状態ではボタンを押す度に、その文字が変わるだけで、連続して記入されていきません。 JavaScriptは初心者ですがアドバイス宜しくお願いします。 **************************** <HTML> <HEAD> <SCRIPT LANGUAGE="JavaScript"> <!-- str = new Array(3); str[0] = "野菜"; str[1] = "肉"; str[2] = "魚"; function setMsg(id) { document.all.str.innerHTML = str[id]; } // --> </SCRIPT> </HEAD> <BODY> <p><textarea name="sss" rows="3" cols="40" ID="str"></textarea></p> <p><input type = "button" value="野菜" onClick="setMsg(0)" > <input type = "button" value="肉" onClick="setMsg(1)"> <input type = "button" value="魚" onClick="setMsg(2)"></p> </BODY> </HTML>

  • HTMLのボタンについて質問です。

    現在、ボタンを押したら背景色が変わるプログラムを作成中ですが、うまく切り替わりません。自分としては、value=1をあらかじめ設定しておき、そこで押される度に関数内で、valueの値をプラスしていき、if文で切り替えられるのかなと考えました。 どなたかわかる方おりましたら、回答ください。 またbuttonのvalueなど勝手に増やしても大丈夫なのでしょうか？ それとも増やせないのでしょうか？ <html> <head> <title>element.childNodes - エレメントの子ノードリストを取得</title> </head> <body> <p id="hoge">OASIS</p> <script type="text/javascript"> function change(){ var c=document.getElementById("submit").value; if(c%2==0){ document.body.bgColor="red"; } else{ document.body.bgColor="black"; } c++; //document.body.bgColor="red"; } </script> <input type="button" id="submit" value="1" onclick="change()"> </body> </html>

    • ベストアンサー
    • HTML
  • フォームに表示される文字をセンタリングさせたい。

    Javascriptの初心者です。宜しくお願いします。 テキストエリアが2つあったとします。 1のテキストエリアにある値を入力してボタンを押すと、 2のテキストエリアに1で入力した値をそのまま表示させ、 尚且つ表示された値をフォーム内でセンタリングさせたいのですが どうすればよいのかわかりません・・・。 ご存知の方がいらっしゃいましたら教えて下さい。 どうぞ宜しくお願い致します。 <html> <head> <script language="JavaScript"> <!-- function my1() { a=document.form1.text1.value; document.form1.text2.value=a; } //--> </script> </head> <body> <form name="form1"> <input type="texterea" name="text1"> <input type="texterea" name="text2"> <input type="button" value="CLICK!" onClick="my1()"> </form> </body> </html>

  • テキストボックス 追加

    最初5つのテキストボックスを表示して追加ボタンを押して、6個目から15個目を追加しようとしています。name="tb1"　からname="tb15"までを設定したいです。15個になった際にボタンを押せなくしたいです。入力された情報をPHP側で処理しようとしています。 以下のソースを改良しようとしているのですが、うまくいきません。 どのようにしたらいいでしょうか？ <script language="JavaScript"> <!-- function add(){ document.all.AddArea.innerHTML = document.all.AddArea.innerHTML + "<br><input type=\"text\" name=\"Txt_Object\">"; } // --> </script> </head> <body> <form id="f1"> <div id="AddArea"> <input type="text" name="Txt_Object"> </div> <input type="button" value="追加" onClick="add()"> </form> </body> </html>

  • ボタンに書かれている文字の入れ替え

    ２つのボタンのどちらを押しても、ボタンに書かれているアルファベットが入れ替わるようにしたいのですが、うまくいきません。 alert(obj1)、alert(obj2)などとして、A,Bともに読み込まれているようなのですが、alert(tmp)の時はundefinedがでます。 どこが間違っているのかよろしければ教えてください。 <!doctype html> <html> <head> <meta charset="utf-8"> <title>勉強中</title> </head> <body> <script> function change_alphabet() { var tmp; var obj1 = document.getElementById("button_1").value; var obj2 = document.getElementById("button_2").value; // alert(obj1); // alert(obj2); tmp = obj1.innerHTML; // alert(tmp); obj1.innerHTML = obj2.innerHTML; obj2.innerHTML = tmp; // alert(obj2); } </script> < input type = "button" id = "button_1" value = "A" style = "width: 25px; height: 25px" onclick = "change_alphabet()" > < input type = "button" id = "button_2" value = "B" style = "width: 25px; height: 25px" onclick = "change_alphabet()" > <body> </html>

  • テキストエリア内で改行するには。

    次のスクリプトを実行すると、テキストエリア内に 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>

  • ラジオボタンの値を・・・・・

    <html> <head> <script language="javascript"> function osu(){ document.form1.text1.value=document.form1.radio1.value; } </script> </head> <body> <form name="form1"> <input type="radio" name="radio1" value="男" checked>男 <input type="radio" name="radio1" value="女">女 <input type="button" value="押す" onClick="osu()"> <input type="text" name="text1"> </form> </body> </html> ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー 上記のプログラムは、選択されたラジオボタンの値をテキストボックスに表示させるプログラムなんですが、何故かラジオボタンの値が表示されず、「undefined」というのが表示されます。 どうすれば、「男」または「女」という値を表示させることができますか？ ちなみにこれは、「○○○．ｈｔｍｌ」で保存します

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する