• ベストアンサー

JavaScriptを使ってボタンを消したい

<input type="button" value="ボタン" name="aaa" onClick="this.style.display='none'"> で、消すことができますが、 これをJavaScriptを使って、 別のところからボタンを消すためにはどうやったらいいのでしょうか？ ＃例えばどこかをクリックしたときにボタンを表示したり消したりするなど。

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

  • ベストアンサー
  • s_doc
  • ベストアンサー率24% (93/377)
回答No.1

thisを変えればいいと思います。 this.style.displayを、 document.myForm.myInput.style.displayなどと置き換えてみたらどうでしょうか。 myFormは消したいボタンのフォーム名、 myInputは消したいボタンの名前が入ります。

pentaro_2000
質問者

お礼

できました！ 関数名もaaa()にしていたので、 それで、エラーが起こっていたみたいです。 ありがとうございました。

pentaro_2000
質問者

補足

回答ありがとうございます。 <form name="aaa"> <input type="button" value="ボタン" name="aaa"> の状態で、 aaa.aaa.style.display="none"; にしてみたのですが、 「オブジェクトでサポートされていないプロパティかメソッドです」 と表示され、構文エラーになります。 どこがおかしいのでしょうか…。

その他の回答 (1)

  • s_doc
  • ベストアンサー率24% (93/377)
回答No.2

formとinputとで同じ「aaa」という名前を付けてあるので、 混乱してるんですね。 どちらかの名前を変えてやってください。

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

関連するQ&A

  • JavaScriptによるonClickの使い方

    JavaScriptのonClickと関数の使い方で悩んでいます。 現在、divブロック表示非表示切り替えスクリプト：http://designlabolatory.blog16.fc2.com/blog-entry-139.htmlを参考に、ボタンを押して内容の表示・非表示を行いたいと思っています。 <form name="btnname"> <input type="button" name="inpname1" value="▼" onClick="openclosebtn1()"> <div id="openclose1" style="display:none;"> 　内容：１ </div> <input type="button" name="inpname2" value="▼" onClick="openclosebtn2()"> <div id="openclose2" style="display:none;"> 　内容：１ </div> <input type="button" name="inpname3" value="▼" onClick="openclosebtn3()"> <div id="openclose3" style="display:none;"> 　内容：１ </div> </form> 上記のように１つのformの中で、複数の項目のボタンを押して表示・非表示を行うのに、 function openclosebtn1(){ } function openclosebtn2(){ } function openclosebtn3(){ } ３つの関数にそれぞれbuttonのnameとdivのidを変えて書いています。 これを、１つの関数にうまくまとめたいのですが、いまいち方法がわかりません。 JavaScript初心者で、勉強不足なのは重々承知です。 手元にある本を読んでも書き方がわかりません。 わかる方アドバイスお願いします。

  • Javascriptを短くしたい

    初歩的なことですみません。 Javascriptで表示／非表示を切り替えるものを作ろうと思うのですが、 以下のサンプル文のような形では、項目数が増えるとその分だけ どんどんJavascriptも長くなっていってしまいます。 Javascript文を簡潔にするには、どのように記述すればよいのでしょうか。 よろしくお願いします。 <script type="text/javascript"> <!-- function Hyo1(num) { if (num == 0) { document.getElementById("cont1").style.display="block"; } else { document.getElementById("cont1").style.display="none"; } } function Hyo2(num) { if (num == 0) { document.getElementById("cont2").style.display="block"; } else { document.getElementById("cont2").style.display="none"; } } // --> </script> <div id="cont1">ああああああ</div> <form> <input type="button" value="表示" onclick="Hyo1(0)"> <input type="button" value="非表示" onclick="Hyo1(1)"> </form> <form> <div id="cont2">いいいいいい</div> <input type="button" value="表示" onclick="Hyo2(0)"> <input type="button" value="非表示" onclick="Hyo2(1)"> </form>

  • JavaScriptで項目入力の制限分岐の仕方

    WEBアンケートフォームを作る際、JavaScriptで項目入力の制限分岐の仕方を教えてください WEBアンケートフォームを作ろうとしているのですが、条件がいくつかありうまく作れません。 どなたかこの様な条件分岐でうまくいく方法をご存知の方、あるいは例がのっているWEBチュートリアルのページをご存知の方いらっしゃいませんか？ 【以下、作りたいフォームの項目】 選択肢Ａ～Ｅ（ラジオボタンによる選択）とプルダウンメニュー、テキストボックス入力フィールドがある。 --------------- Ａ プルダウンメニュー Ｂ Ｃ Ｄ Ｅ テキストボックス --------------- テキストボックスはグレーアウトでデフォルトは入力不可になっている。 プルダウンメニューもデフォルトでは選択ができないようになっている。 Ａを選んだらプルダウンメニューが選択可。 Ｃ、Ｄ、Ｅを選んだら、テキストボックスが入力可能になる。 ■■■ いろいろOK Wave内を調べたり、ググって調べて以下のようなソースを書いてみたのですが、 FireFoxやGoogleCromeだとうまく動きません。 これを動かせるようにしていただいても、助かります。 <input type="radio" name="radio1" value="ＡＡＡ" id="r1" checked onclick="this.form.select1.style.display='inline';this.form.select2.style.display='none';this.form.select3.style.display='none';this.form.select4.style.display='none';this.form.select5.style.display='none'"><label for="r1">ＡＡＡ</label><select name="select1" style="display='inline'"><option value="" selected> ------------- </option><option value="１１１">１１１</option><option value="２２２">２２２</option><option value="３３３">３３３</option><option value="４４４">４４４</option><option value="５５５">５５５</option><option value="６６６">６６６</option><option value="７７７">７７７</option><option value="８８８">８８８</option><option value="９９９">９９９</option></select><br /><input type="radio" name="radio1" value="ＢＢＢ" id="r2" onclick="this.form.select2.style.display='inline';this.form.select1.style.display='none';this.form.select3.style.display='none';this.form.select4.style.display='none';this.form.select5.style.display='none'"><label for="r2">ＢＢＢ</label><input name="select2" style="display='none'"><br /><input type="radio" name="radio1" value="ＣＣＣ" id="r3" onclick="this.form.select3.style.display='inline';this.form.select1.style.display='none';this.form.select2.style.display='none';this.form.select4.style.display='none';this.form.select5.style.display='none'"><label for="r3">ＣＣＣ</label><input name="select3" style="display='none'"><br /><input type="radio" name="radio1" value="ＤＤＤ" id="r4" onclick="this.form.select4.style.display='inline';this.form.select1.style.display='none';this.form.select2.style.display='none';this.form.select3.style.display='none';this.form.select5.style.display='none'"><label for="r4">ＤＤＤ</label><input name="select4" style="display='none'"><br /><input type="radio" name="radio1" value="ＥＥＥ" id="r5" onclick="this.form.select5.style.display='inline';this.form.select1.style.display='none';this.form.select2.style.display='none';this.form.select3.style.display='none';this.form.select4.style.display='none'"><label for="r5">ＥＥＥ</label><input name="select5" style="display='none'"> ■■■ よろしくお願いします。

  • JavaScriptで　ボタンを押す。

    JavaScriptでボタンを押すことは可能でしょうか？ ボタンには別の処理を組み込んでありまして、 それをJavaScriptで押したいのですがやり方がわかりません。 本来なら、onClickでJavaScriptを実行させるようにしたいのですが、それはできない仕様なのです。 <input type="SUBMIT" Name"AAA"> 上記のようなボタンをJavaScriptで押すにはどうしたらいいのでしょうか？ どなたかすいませんがご教授ください。

  • javascript ボタンによる表示について

    javascriptのボタンによる表示について質問があります． 質問内容と致しましては，ボタンを表示した時に隠れている問題文を出現させるソースを作っているのですが，うまくプログラムが動作しません． おそらく，window.onloadの使い方が理解しきれてないからだとは思いますが， よくわかりませんので質問させていただきました． 回答の方よろしくお願いします． 以下ソースです． <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/javascript"> function hideForm1(){ document.getElementById("formblock1").style.display = "none"; } function showForm1() { document.getElementById("formblock1").style.display = "block"; } window.onload = function(){ hideForm1(); }; function hideForm2(){ document.getElementById("formblock2").style.display = "none"; } function showForm2() { document.getElementById("formblock2").style.display = "block"; } window.onload = function(){ hideForm2(); }; function hideForm3(){ document.getElementById("formblock3").style.display = "none"; } function showForm3() { document.getElementById("formblock3").style.display = "block"; } window.onload = function(){ hideForm3(); }; function send(){ function chk1(frm, names){ var r = true; for(var i = 0; i < names.length; i++) r &= (frm.elements[names[i]].value !=""); return r; } var r = true; r &= chk1(document.forms['nform'],['kaitouran11','kaitouran12','kaitouran13','kaitouran14','kaitouran21','kaitouran22','kaitouran23','kaitouran24','kaitouran31','kaitouran32','kaitouran33','kaitouran34']); if(r){ document.forms['nform'].submit(); }else{ alert('解答欄に空白があります'); } } </script> </head> <body> <form> <input type="button" value="問題1" onclick="showForm1(); this.disabled = true;"/> </form> <form> <input type="button" value="問題2" onclick="showForm2(); this.disabled = true;"/> </form> <form> <input type="button" value="問題3" onclick="showForm3(); this.disabled = true;"/> </form> <form name="nform" method="post" action="./kaitou1.php" enctype="multipart/form-data"> <div id="formblock1"> <p>　問題1</p> <p>問題文</p> <p> (1)<input type="text" name="kaitouran11" size="14"> (2)<input type="text" name="kaitouran12" size="14"> (3)<input type="text" name="kaitouran13" size="14"> (4)<input type="text" name="kaitouran14" size="14"> </p> </div> <div id="formblock2"> <p>　問題2</p> <p>問題文</p> <p> (1)<input type="text" name="kaitouran21" size="14"> (2)<input type="text" name="kaitouran22" size="14"> (3)<input type="text" name="kaitouran23" size="14"> (4)<input type="text" name="kaitouran24" size="14"> </p> </div> <div id="formblock3"> <p>　問題3</p> <p>問題文</p> <p> (1)<input type="text" name="kaitouran31" size="14"> (2)<input type="text" name="kaitouran32" size="14"> (3)<input type="text" name="kaitouran33" size="14"> (4)<input type="text" name="kaitouran34" size="14"> </p> </div> </form> <input type="button" value="送信" onclick="send()"> </body> </html>

  • 同名ボタンのクリック時要素番号の取得方法

    <html> <head> <script Language="JavaScript"><!-- function doSentaku(btn) { //クリックされたボタンの要素番号が知りたい alert(btn.name); } // --></script> </head> <body> <form name="mainWin"> <input type="button" value="配列ボタンテスト1" name="testbtn" onClick="javaScript:doSentaku(this)"><br> <input type="button" value="配列ボタンテスト2" name="testbtn" onClick="javaScript:doSentaku(this)"><br> <input type="button" value="配列ボタンテスト3" name="testbtn" onClick="javaScript:doSentaku(this)"><br> </form> </body> </html> ----------------------------------------------------------------------------------------- このようなFromがあった場合、nameが同じである時、javaScriptではボタンのElemetは配列扱いになるかと思うのですが、doSentaku関数内ではnameは取得できるとして、クリックされた要素番号は取得できるのでしょうか？ なお、訳ありでdoSentaku関数のボタンonClickの関数引数はすべて同じ定義しかできないものとします。 つまり個々ボタンを識別する値は指定できないと言うことです。 まことに申し訳ありませんが、どうかアドバイスのほどよろしくお願いします。

  • ファイル選択ダイアログが表示しない

    javascriptで<INPUT type=file name=faile1>を file1.click();でクリックしてファイル選択ダイアログを表示させようとしても表示しません。 formから <INPUT type=file id=file1 name=image style="DISPLAY: none"> <INPUT type="image" src="./img/up02.jpg" id=button1 value=Button name=button1 を出すとファイル選択ダイアログが表示されます。 独自のボタンイメージでファイル選択ダイアログを表示したいために <INPUT type="image"をクリックされたときにjavascriptで <INPUT type=file をクリックさせています。 したいことは、独自のボタンで、ファイル選択ダイアログを表示して、 phpに選択されたファイルパスを送信したいです。 下記コードをご参考にしてください。 <html> <head> <title>upload test</title> </head> <body> 何かの編集ページとか <iframe name="uploader" src="" style="width:0px;height:0px;border:0px;"></iframe> <form name=form1 target="uploader" method="POST" action="http://*.**.**.*/test.php" enctype="multipart/form-data"> <INPUT type=file id=file1 name=image style="DISPLAY: none"> <INPUT type="image" src="./img/up02.jpg" id=button1 value=Button name=button1 LANGUAGE=javascript onclick="return button1_onclick()"/> </form> <script type="text/javascript"> <!-- function button1_onclick() { window.alert("クリックされた"); file1.click(); document.form1.submit(); } //--> </script> </body> </html>

  • 複数のラジオボタン項目でのテキスト入力欄の有効化

    調べながら手探りでソースを書いてみましたが、うまく動きません。 javascript初心者ですので、ものすごく初歩的な勘違いがあったり、または根本から全く間違っているかもしれません。 以下のソースのように、ラジオボタンで選択してもらう項目が３つある場合、それぞれ「なし」を選択した場合だけテキスト入力欄を非表示にしたいのですがうまく動きません。 ラジオボタンで選択する項目が１つずつだとうまくいくのですが、３つの場合どこを修正したらいいのでしょうか？ よろしくお願いします。 【HTML】 <script type="text/javascript" src="sample.js" charset="UTF-8"></script> <ul> <li><input type="radio" name="AAA" id="nothing" value="なし" onClick="changeDisplay()"/>なし</li> <li><input type="radio" name="AAA" id="by_week" value="１週間ごと" onClick="changeDisplay()"/>１週間ごと</li> <li><input type="radio" name="AAA" id="by_month" value="1ヶ月ごと" onClick="changeDisplay()"/> 1ヶ月ごと</li> <li><input type="radio" name="AAA" id="by_year" value="１年ごと" onClick="changeDisplay()"/>１年ごと</li> </ul> <p id="AAA-text" style="display:none;"> <input type="text" name="XXX" size="15" > </p> <ul> <li><input type="radio" name="BBB" id="nothing" value="なし" onClick="changeDisplay()"/>なし</li> <li><input type="radio" name="BBB" id="by_week" value="１週間ごと" onClick="changeDisplay()"/>１週間ごと</li> <li><input type="radio" name="BBB" id="by_month" value="1ヶ月ごと" onClick="changeDisplay()"/> 1ヶ月ごと</li> <li><input type="radio" name="BBB" id="by_year" value="１年ごと" onClick="changeDisplay()"/>１年ごと</li> </ul> <p id="BBB-text" style="display:none;"> <input type="text" name="YYY" size="15" > </p> <ul> <li><input type="radio" name="CCC" id="nothing" value="なし" onClick="changeDisplay()"/>なし</li> <li><input type="radio" name="CCC" id="by_week" value="１週間ごと" onClick="changeDisplay()"/>１週間ごと</li> <li><input type="radio" name="CCC" id="by_month" value="1ヶ月ごと" onClick="changeDisplay()"/> 1ヶ月ごと</li> <li><input type="radio" name="CCC" id="by_year" value="１年ごと" onClick="changeDisplay()"/>１年ごと</li> </ul> <p id="CCC-text" style="display:none;"> <input type="text" name="ZZZ" size="15" > </p> 【sample.js】 function changeDisplay() { if ( document.mailform["AAA"][0].checked ) { document . mailform["XXX"] . disabled = true; document . getElementById('AAA-text') . style . display = "none"; } else { document . mailform["XXX"] . disabled = false; document . getElementById('AAA-text') . style . display = "inline"; } } window.onload = changeDisplay; //---------------------------------------------------------------------------- function changeDisplay() { if ( document.mailform["BBB"][0].checked ) { document . mailform["YYY"] . disabled = true; document . getElementById('BBB-text') . style . display = "none"; } else { document . mailform["YYY"] . disabled = false; document . getElementById('BBB-text') . style . display = "inline"; } } window.onload = changeDisplay; //---------------------------------------------------------------------------- function changeDisplay() { if ( document.mailform["CCC"][0].checked ) { document . mailform["ZZZ"] . disabled = true; document . getElementById('CCC-text') . style . display = "none"; } else { document . mailform["ZZZ"] . disabled = false; document . getElementById('CCC-text') . style . display = "inline"; } } window.onload = changeDisplay;

  • ラジオボタンの表示非表示のjavascriptにつ

    申し訳ありません。 お詳しい方に教えていただきたいのです。 以前、こちらでご質問して回答いただいたのですが、 問題がありまして、ラジオボタンのyes,noでyesを選択したら、フォームページが現れるという仕組みを教わったのですが、 フォームの方はjavascriptを仕組み、例えば記入していない欄をそのままにして送信ボタンを押すと、赤い文字でエラー表示するフォームを作っているのです。エラーの状態で送信ボタンを押すと、最初のラジオボタンのyes,noに戻ってしまい、フォームがたたんだ状態になるそうなのです。 それで、いきなりフォームがたたまれて最初の状態に戻るのではなく、フォームにエラーが表示されるようにしたいのです。 yes.noをせんたくするjavascriptに問題があるのではないかと思っているのですが。。 もしおわかりになるかたがいらっしゃいましたらおしえていただけませんでしょうか。 よろしくお願い致します。 以下は教えていただいたjavascriptです。 フォームは簡単なものになっているので、javascriptは入っておりません。 ==== 動作サンプル http://hppg.moe.hm/okwave/qa/q7294891/ ==== ソース <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitio … <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <title>【OKWave回答サンプル集】ラジオボタンによる表示、非表示について</title> <link rel="stylesheet" href="/okwave/qa/css/basic.css" type="text/css" /> <script type="text/javascript"> var dispArea; var dispAreaMsg; window.onload = function() { dispArea = document.getElementById('disparea'); dispAreaMsg = document.getElementById('dispareamsg'); } function change ( value ) { if ( value == 'yes' ) { dispArea.style.display = 'block'; dispAreaMsg.style.display = 'none'; } else if ( value == 'no' ) { dispArea.style.display = 'none'; dispAreaMsg.style.display = 'block'; } } </script> <style type="text/css"> #disparea { display:none; } #dispareamsg { display:none; } </style> </head> <body> <h1>ラジオボタンによる表示、非表示について</h1> <form name="test"> <input type="radio" name="conf" value="yes" onclick="change(this.value);"/>はい <input type="radio" name="conf" value="no" onclick="change(this.value);" />いいえ <p id="disparea"> <input type="button" value="応募" /> </p> <p id="dispareamsg"> 応募できません。 </p> </form> </body> </html>

  • HTML、Javascriptでトグルボタンを作成する方法について質問

    HTML、Javascriptでトグルボタンを作成する方法について質問です。 自分が考えた動作としては ひとつのform内に複数のボタンを設置　初期値(表示)は"有効" ボタンを押すと値(表示)が"無効"に変わる もう一度押すと"有効"に変わる これの繰り返しがしたい というものです。 書いたコードは <javascript部分> function dspmsg(btnObject){ status = btnObject.value; if(status=="有効"){ document.btnObject.value = "無効"; }else{ document.btnObject.value = "有効"; } } <html部分> <form> <input type="button" name="yuko_FLG1" value="有効" onclick="dspmsg(this)" /> <input type="button" name="yuko_FLG2" value="有効" onclick="dspmsg(this)" /> ・・・・・ </form> 当然のことながら動きませんでした。 自分でも間違っていることはわかるのですが、修正の仕方がわかりません。 よろしくお願いします。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する