onClick関数でのテキスト、数値エリアの削除

2023/09/05 15:22

このQ&Aのポイント

onClick関数を使用して、指定したテキストや数値のエリアを削除する方法について教えてください。
ボタンをクリックすることで、特定のエリアのテキストや数値を消去する方法についてお知らせください。
JavaScriptのonClick関数を利用して、入力エリアのテキストや数値を削除する方法について教えてください。

ベストアンサー

onClick関数でのテキスト、数値エリアの削除

2014/03/20 20:32

下記のようにボタンを押下して、対象のエリアをクリアしたいのですが機能しません。どのような対策がございますか?  <div style="top:100px; left:200px"> <input type="button" style="width:10px; height:10px; name="クリア1" onClick="clear(1)"; runat="test" /> </div> <div style="top:200px; left:200px">> <input type="button" style="width:10px; height:10px; name="クリア2" onClick="clear(2)"; runat="test" /> </div> //jsファイル function clear(btnNo){ if(btnNo == 1) { document.getElementById("TextBox1"; "Number1").value == "" } else if (btnNo == 2) { document.getElementById("TextBox2"; "Number2").value == "" } }

genesis50
お礼率11% (10/86)

JavaScript
回答数1
ありがとう数7

みんなの回答 （1）
専門家の回答

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

ベストアンサー

yambejp
ベストアンサー率51% (3827/7415)

2014/03/20 22:14 回答No.1

＞document.getElementById("TextBox1"; "Number1").value == "" document.getElementById("TextBox1).value = "" document.getElementById("Number1").value = "" と分けて書いてはいけないの？ちなみに代入のときはイコールは一つ

関連するQ&A

onClick関数
作成したclear()が呼ばれません。 function定義の直下に、alert()を入れてもダイアログボックスの表示がでません。 htmlタグの設定がダメなのでしょうか?  <div style="position:absolute; top:65px; left:737px;" title="" runat="server"> <input type="button" style="width:40px; height:20px; font-family:'ＭＳゴシック'; font-size:9pt; color:#000000; text-align:center;" tabindex="1710" value="クリア" name="Check1710" onClick="clear(1)"; runat="server" /> </div> <div style="position:absolute; top:114px; left:737px;" title="" runat="server"> <input type="button" style="width:40px; height:20px; font-family:'ＭＳゴシック'; font-size:9pt; color:#000000; text-align:center;" tabindex="1720" value="クリア" id="Check1720" onclick="clear(2);" runat="server" /> </div> //jsファイル function clear(btnNo){ alert("確認"); if(btnNo == 1) { document.getElementById("TextBox1").value = "" } else if (btnNo == 2) { document.getElementById("TextBox2").value = "" } }
- ベストアンサー
- JavaScript
ボタンクリック時の処理ができない
作成したcleartest()が呼ばれません。 function定義の直後に、alert()を入れてもダイアログボックスの表示ができずに機能しません。分からないのはfunction定義の直前に、cleartest()を加えるとダイアログボックスの表示が出ますが、ボタンを押下してもクリア処理ができません。どのような事を考慮すれば良いですか? また、代替案はどのような方法がございますか?  <div style="position:absolute; top:100px; left:500px;" title="" runat="server"> <input type="button" style="width:40px; height:20px; font-family:'ＭＳゴシック'; font-size:9pt; color:#000000; text-align:center;" tabindex="1" value="クリア" id="test" onclick="cleartest(1);" runat="server" /> </div> <div style="position:absolute; top:200px; left:500px;" title="" runat="server"> <input type="button" style="width:40px; height:20px; font-family:'ＭＳゴシック'; font-size:9pt; color:#000000; text-align:center;" tabindex="1" value="クリア" id="test" onclick="cleartest(2);" runat="server" /> </div> //jsファイル cleartest(); //一時的に追加 function cleartest(btnNo){ alert("確認"); if(btnNo == 1) { document.getElementById("TextBox1").value = "" } else if (btnNo == 2) { document.getElementById("TextBox2").value = "" } }
- ベストアンサー
- JavaScript
onClickがinput type="image"だとできない！
以前、↓の質問をさせていただき解決したのですが、 input type="image" にしたいのですが、ただ変更するだけでは、できません。 http://oshiete1.goo.ne.jp/kotaeru.php3?q=2068911 どのように変更したらいいでしょうか？教えてください！現在下記の方法でやっています。 <style type="text/css"> .white{ background-Color:white; color:black; } .gray{ background-Color:gray; color:yellow; } .blue{ background-Color:blue; color:red; } </style> <body> <form> 全体： <input type="button" value="White" onClick="document.body.className='white'"> <input type="button" value="Gray" onClick="document.body.className='gray'"> <input type="button" value="Blue" onClick="document.body.className='blue'"><br> テーブル1: <input type="button" value="White" onClick="document.getElementById('t1').className='white'"> <input type="button" value="Gray" onClick="document.getElementById('t1').className='gray'"> <input type="button" value="Blue" onClick="document.getElementById('t1').className='blue'"><br> テーブル2: <input type="button" value="White" onClick="document.getElementById('t2').className='white'"> <input type="button" value="Gray" onClick="document.getElementById('t2').className='gray'"> <input type="button" value="Blue" onClick="document.getElementById('t2').className='blue'"><br> </form> <table width=100% id="t1"> <tr><td>test</td></tr> </table> <table width=100% id="t2"> <tr><td>test</td></tr> </table> </body>
- ベストアンサー
- JavaScript
CSSでメニューバー
初心者の質問ですいません。 CSSでこのようにボックス分けして * { margin : 0 ; padding : 0 ; } body { width : 100% ; } #my_body{margin:0 auto; width:875px;} #my_header { width : 100% ; height : 80px ; } #my_header2{ width : 100% ; background-color: #0080ff;} #my_navigation{float:left; width:150px; background-color: #0080ff; min-height: 1000px;} #my_contents{float:left; width:725px; background-color: #e5f6ff; min-height: 1000px;} #my_footer { width : 100% ; clear : both ; background-color: #0080ff; } HTMLのコード <div id="my_body"> <div id="my_header">一番上のタイトルとグラデーション</div> <div id="my_header2"> グラデーション <style type="text/css"> body { background-image: url("縦長の写真"); background-repeat: repeat-x; } </style> メニューバー <form> <input type="button" value="" class="li01" style="float:left;" onClick="URL'" /> <input type="button" value="" class="li02" style="float:left;" onClick="URL'" /> <input type="button" value="" class="li03" style="float:left;" onClick="URL'" /> <input type="button" value="" class="li04" style="float:left;" onClick="URL'" /> <input type="button" value="" class="li05" onClick="URL'" /> </form> </div> 左のメニューバー <div id="my_navigation"> <div id="mynavi"> </div> </div> 本文 <div id="my_contents"> <div id="mymain"> </div> </div> フッダー <div id="my_footer"></div> </div> これで、my_header2で指定したグラデーションがメニューバーの両側に表示されると思うのですが、グラデーションが表示されません。初心者なので根本的な間違えを起こしていたらすみません。なぜ表示されないか教えていただけませんか。長文失礼しました。
- 締切済み
- HTML
ラジオボタンとフォーム検索の結び付け
スマホ用にゲームの攻略サイトを作りたいと思っています。 ■やりたいこと■ 値段はわかっているが名前がわからないアイテムの判別。まずラジオボタンで「武器」か「防具」を選びます。そして値段を入れると「武器・600」＝勇者の剣「防具・600」＝盾といったように選んだラジオボタンによって同じ数字でも表示結果を変えたいと考えています。ラジオボタン「武器」を選ぶと検索用ボタン「button_1」が表示される。ラジオボタン「防具」を選ぶと検索用ボタン「button_2」が表示される。 button_1と2の切り分けによってfunctionの切り分けを行っている状態です。 ■問題点■ 「防具」を押す→600を入力→「盾」が表示される→「武器」を押す→「勇者の剣」が表示されてしまう。チェックボックスの選択を変えても表示結果は再度検索するまでそのまま、もしくはチェックボックスを選び直した際は前回入力した数値は消えるなど対策を取りたいです。そもそも他にもっといいやり方があるなど改善案をご教授いただきたいです。よろしくお願いします。【HTML】 <body> <div class="top_form"> <form name="test"> <label><input type="radio" name="radio_btn" value="buki" onclick="func();" checked="checked" />武器</label> <label><input type="radio" name="radio_btn" value="bougu" onclick="func();" />防具</label><br> <input id="test_form" type="tel" name="num"> <input id="button_1" type="button" value="button_1" onClick="func()"> <input id="button_2" type="button" value="button_2" onClick="func2()"> </form> </div> <div id="result"></div> </body> 【CSS】 <style> .top_form { width:300px; margin:0 auto; margin-top:30px; } #test_form { width:250px; height:30px; font-size:14px; margin-top:14px; } #button_1 { text-decoration: none; -moz-appearance: none; -webkit-appearance: none; appearance: none; width:90px; height:44px; margin-top:15px; } #button_2 { text-decoration: none; -moz-appearance: none; -webkit-appearance: none; appearance: none; width:90px; height:44px; margin-top:15px; background-color:#36C; } #result { border:solid 1px #666666; margin:0 auto; height:50px; width:200px; font-size:20px; line-height:50px; text-align:center; margin-top:30px; } </style> 【javascript】 <script> function func() { radio = document.getElementsByName('radio_btn'); if (radio[0].checked) { //button_1が出る document.getElementById('button_1').style.display = ""; document.getElementById('button_2').style.display = "none"; } else if (radio[1].checked) { //button_2が出る document.getElementById('button_1').style.display = "none"; document.getElementById('button_2').style.display = ""; } var url = ""; if (document.test.num.value == "600") { url = "勇者の剣"; } document.getElementById('result').innerHTML = url; } window.onload = func; function func2() { radio = document.getElementsByName('radio_btn'); var url = ""; if (document.test.num.value == "600") { url = "盾"; } document.getElementById('result').innerHTML = url; } </script>
- ベストアンサー
- JavaScript
ボタンに書かれている文字の入れ替え
２つのボタンのどちらを押しても、ボタンに書かれているアルファベットが入れ替わるようにしたいのですが、うまくいきません。 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>
- ベストアンサー
- JavaScript
あとだしじゃんけんで
こんにちは。趣味でjavascriptをしている者です。さっそくですが質問させていただきますあとだしじゃんけんを作っているのですが、キーコードによって、グー、チョキ、パーを表示させることができません・・・以下のコードの悪い点を指摘していただけないでしょうかよろしくお願いします <html> <head> <script type="text/javascript"> function init() { document.onkeypress = KeyPressed; } function KeyPressed() { switch(event.keyCode) { case 49: appendElement ( "Mytable", "jk/Myhand1.jpg"); break; case 50: appendElement( "Mytable", "jk/Myhand2.jpg"); break; case 51: appendElement( "Mytable", "jk/Myhand3.jpg"); break; default: break; } } function henkou() { document.getElementById("span1").childNodes[0].nodeValue = "こんばんは!!"; } function removeElement( id ) { var obj = document.getElementById( id ); if ( obj.hasChildNodes() ) { obj.removeChild( obj.lastChild ); } } function appendElement( pid, src) { var pobj = document.getElementById( pid ); var cobj = document.createElement("img"); cobj.src = src; pobj.appendChild( cobj ); } </script> </head> <body bgColor="rgb(230,240,250)"> <form name="Form1"> <input type="button" value="変更" onClick="henkou()">　 <input type="button" value="remove1" onClick="removeElement( 'PCtable' );">　 <input type="button" value="remove2" onClick="removeElement( 'Mytable' );"><br> <input type="button" value="append1" onClick="appendElement( 'PCtable', 'jk/PChand3.jpg' );"> </form> <div id="div1" style="position:absolute; left:130px; top:80px;"> <table width="200" height="200" bgColor="00ef66"> <td id="PCtable"> <img id="PHi" src="jk/PChand1.jpg"></td></table> </div> <div id="div2" style="position:absolute; left:430px; top:80px;"> <table width="200" height="200" bgColor="00ef66"> <td id="Mytable"> <img id="MHi" src="jk/Myhand1.jpg"></td></table> </div> <div style="position:absolute; left:360px; top:210px;"> <span id="spanvs" style="color:#ff2244; font-size:36px; font-weight:bold;"> VS </span> </div> <div style="position:absolute; left:100px; top:310px;"> <span id="span1" style="color:#0055ff; font-size:26px; font-weight:bold;"> こんにちは </span> </div> <div style="position:absolute; left:100px; top:350px;"> <span id="span1" style="color:#00ff55; font-size:26px; font-weight:bold;"> おはようございます </span> </div> </body> </html>
- ベストアンサー
- JavaScript
javascriptのonclickに関数を追加？
現在、javascriptでinput要素に新しくonclick='hoge()'などの関数を追加したいのですができません。色々調べたのですが、結局わからなかったので質問させていただきます。何卒、ご教授宜しくお願いします。 ■やろうとしていること下記ソースのボタンをどれかクリックしたら、新しく、<input type="button" value="次へ" onclick="next()" />というのを<span>に生成したいのですが、onclickが追加されずに困っております。どのようにしたらよいのでしょうか？ちなみにtypeとvalueは生成されています。 <form name="test"> <input type="button" value="" id="answer_0" onclick="test(0)" /> <input type="button" value="" id="answer_1" onclick="test(1)" /> <input type="button" value="" id="answer_2" onclick="test(2)" /> </form> <span id="test2"></span> <script> function test(n) { ・・・中略 var nq = document.createElement('input'); nq.type = "button"; nq.value = '次へ'; nq.onclick = "nexｔ()"; document.getElementById('test2').appendChild(nq); } </script> 以上、宜しくお願い申し上げます。
- ベストアンサー
- JavaScript
入力判定についての質問
フォームから送信ボタンをクリックしたときにテキストが空なら送信画面に表示されませんと表示するプログラムを考えているのですがうまくいきません（行き詰まりました）どなたかヒントになるコードなど教えてほしいです <input type = "button" name="bot"style="WIDTH: 100px; HEIGHT: 30px" VALUE ="ID"><input type="text"name="example" style="WIDTH: 100px; HEIGHT: 30px"value=><br><p> <input type = "button" name="bot"style="WIDTH: 100px; HEIGHT: 30px" VALUE ="パス"><input type="text" name="sample"style="WIDTH: 100px; HEIGHT: 30px" value=><br><p> <%String strAns = request.getParameter("example"); String MyAction = request.getParameter("MySubmit"); %> <% if (MyAction=="Toroku"||strAns==("")){ out.println("未入力です"); } %> <form method="post" action=""> <input type="submit"name="text"style="WIDTH: 100px; HEIGHT: 30px" value="送信"onClick="func('Toroku');" > <input type="reset" style="position:relative;left:100px;WIDTH: 100px; HEIGHT: 30px"value="リセット"> </form> <script language="JavaScript"> function func(MyCommand){ document.MyForm.MySubmit.value=MyCommand; document.MyForm.submit(); } </script>
- ベストアンサー
- Java
javascriptでオブジェクトの重なりを判定
お世話になります。 javascriptを使用して、<div>で作られた複数のオブジェクトが重なったかどうかを判定したいのです。果たして、そんなことは可能なのでしょうか。 <body> <div id="block1" style="background:#F00; width:200px; height:200px; marglin-left:200px;" onclick="javascript=aaa();"></div> <div id="block2" style="background:#0F0; width:200px; height:200px; margin-left:200px;"></div> <div id="block3" style="background:#0F0; width:200px; height:200px; margin-left:600px;"></div> <div id="block4" style="background:#0F0; width:200px; height:200px; margin-left:800px;"></div> <div id="block5" style="background:#0F0; width:200px; height:200px; margin-left:1200px;"></div> <div id="block6" style="background:#0F0; width:200px; height:200px; margin-left:2000px;"></div> </body> <script> fucntion aaa(){ var bbb = document.getElementById("block1"); var move= parseFloat(bbb.style.left); bbb.style.left = (move+10)+"px"; } </script> というのがあったとして、block1がblock2、block3・・・・のいずれかと重なった瞬間にalertか何かで「重なりました！」という感じで表示することはできないのでしょうか。javascript オブジェクト重なり　とかで検索しても、目的のものが出てこなかったので… どうぞ、よろしくお願い致します。
- ベストアンサー
- JavaScript