onClick関数が機能しない問題
- 作成したclear()が呼ばれない問題が発生しています。なぜそのような問題が発生しているのでしょうか？
- function定義の直下にalert()を入れてもダイアログボックスが表示されない問題があります。この問題の原因は何でしょうか？
- HTMLタグの設定に問題がある可能性があります。具体的な原因と解決方法はありますか？
- ベストアンサー
onClick関数
作成したclear()が呼ばれません。 function定義の直下に、alert()を入れてもダイアログボックスの表示がでません。 htmlタグの設定がダメなのでしょうか? <!-- 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 = "" } }
- genesis50
- お礼率11% (10/86)
- JavaScript
- 回答数3
- ありがとう数0
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
clear( の名前を、 clearA( にしてみて下さい。 clear ってねぇ。使われてるよね。
その他の回答 (2)
- 久保 泰臣（@omi3_）
- ベストアンサー率24% (254/1031)
下記でテスト済みです。 <!-- htmlファイル --> <HTML><HEAD> <SCRIPT> function clearA(btnNo){ alert("確認"); if(btnNo == 1) { document.getElementById("TextBox1").value = "" } else if (btnNo == 2) { document.getElementById("TextBox2").value = "" } } </SCRIPT> </HEAD> <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="clearA(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="clearA(2);" runat="server" /> </div> //jsファイル
補足
ありがとうございました。 function行の前に、clearA()を追加すると"確認"ダイアログボックスが表示されました。 しかし、クリア1のアイコンを押下しても、"クリア1"ダイアログボックスが表示されません。 どのような原因が考えられますでしょうか? clearA(); function clearA(btnNo){ alert("確認"); if(btnNo == 1) { alert("クリア1"); document.getElementById("TextBox1").value = "" } else if (btnNo == 2) { document.getElementById("TextBox2").value = "" } }
- hp_win7
- ベストアンサー率12% (4/33)
No.1の方に同意です。 関数名を変更してみましょう。
関連するQ&A
- ボタンクリック時の処理ができない
作成したcleartest()が呼ばれません。 function定義の直後に、alert()を入れてもダイアログボックスの表示ができずに機能しません。 分からないのはfunction定義の直前に、cleartest()を加えるとダイアログボックスの表示が出ますが、ボタンを押下してもクリア処理ができません。 どのような事を考慮すれば良いですか? また、代替案はどのような方法がございますか? <!-- htmlファイル --> <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関数でのテキスト、数値エリアの削除
下記のようにボタンを押下して、対象のエリアをクリアしたいのですが機能しません。 どのような対策がございますか? <!-- htmlファイル --> <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 == "" } }
- ベストアンサー
- JavaScript
- 複数のfunctionをonclickで実行するには？
こんばんは。 複数のfunctionを実行するにはどうしたらいいんでしょうか？ 後、追加でなんですが、areaにhref属性を使わず（#を指定すると、ページの上に戻ってしまうため）にポインタを指（リンクに乗せたときのやつです）にするにはどうすればいいんでしょうか？ インラインフレーム１ <script> <!-- function change１(picname) { parent.frames['インラインフレーム２'].document.getElementById("ＩＤ１").src = picname; } function change２(picname) { parent.frames['インラインフレーム２'].document.getElementById("ＩＤ２").src = picname; } ・・・ function change３(picname) { parent.frames['インラインフレーム２'].document.getElementById("ＩＤ８").src = picname; } //--> </script> 上のfunctionを複数実行したいんです。（全てではありません） <map name=""> <area shape="rect" coords="0,0,0,0" alt="" onclick="change１('ファイル')"> ・・・ <area shape="rect" coords="0,0,0,0" alt="" onclick="change８('ファイル')"> </map> インラインフレーム２ <div style="position: absolute; top: 0px; left: 0px; z-index: 0;"><img src="ファイル" id=ＩＤ１ alt="" border="0"></div> <div style="position: absolute; top: 0px; left: 0px; z-index: 1;"><img src="ファイル" id=ＩＤ２ alt="" border="0"></div> <div style="position: absolute; top: 0px; left: 0px; z-index: 2;"><img src="ファイル" id=ＩＤ３ alt="" border="0"></div> ・・・ <div style="position: absolute; top: 0px; left: 0px; z-index: 8;"><img src="ファイル" id=ＩＤ８="0"></div> どうでしょう？ 自分なりに試してみたんですが、成功しませんでした。（onclickにいっぱいくっつけたりとか・・・） どうかお願いします。
- ベストアンサー
- 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
- このタグですが、ページを右端から左へ縮めても、常に中央に位置させたいのですが、、
このタグですが、ページを右端から左へ縮めても、常に中央に位置させたいのですが、、、 <BODY> <DIV style="top : 56px;left : 95px; position : absolute; z-index : 1; width : 336px; height : 21px; " id="Layer1" align="center"><FONT size="+4">テキスト</FONT></DIV> </BODY>
- ベストアンサー
- HTML
- これってJavaScriptですか？？
以下のソースはJavaScriptになりますか？ HPを（初心者ながら）作っているのですが JavaScriptを使うとパソコンのブラウザなどによっては違うように見えると聞きました。 以下のソースがJavaScriptなら、どのへんがどんな風に違って見えるのでしょうか？ <table cellspacing="0" cellpadding="0" style="width:250px;font-size:13px;color:#000"><tbody><tr style="text-align:center"><td style="border-width:1px 1px 0 1px;border-style:solid;border-color:#000"><div style="background:#ffcccc;border-bottom:1px solid #ffcccc;padding:3px 8px;cursor:hand;white-space:nowrap" id="NAME1" onclick="document.getElementById('NAME4').style.backgroundColor='#ffcccc';document.getElementById('NAME1').style.borderColor='#ffcccc';document.getElementById('NAME2').style.borderColor='#000000';document.getElementById('NAME3').style.borderColor='#000000';document.getElementById('NAME4').innerHTML=document.getElementById('NAME11').innerHTML"> タブ１ </div></td><td style="border-width:1px 1px 0 0;border-style:solid;border-color:#000"> <div style="background:#ff6699;border-bottom:1px solid #000;padding:3px 8px;cursor:hand;white-space:nowrap" id="NAME2" onclick="document.getElementById('NAME4').style.backgroundColor='#ff6699';document.getElementById('NAME1').style.borderColor='#000000';document.getElementById('NAME2').style.borderColor='#ff6699';document.getElementById('NAME3').style.borderColor='#000000';document.getElementById('NAME4').innerHTML=document.getElementById('NAME22').innerHTML"> タブ２ </div></td><td style="border-width:1px 1px 0 0;border-style:solid;border-color:#000"> <div style="background:#ffeeee;border-bottom:1px solid #000;padding:3px 8px;cursor:hand;white-space:nowrap" id="NAME3" onclick="document.getElementById('NAME4').style.backgroundColor='#ffeeee';document.getElementById('NAME1').style.borderColor='#000000';document.getElementById('NAME2').style.borderColor='#000000';document.getElementById('NAME3').style.borderColor='#ffeeee';document.getElementById('NAME4').innerHTML=document.getElementById('NAME33').innerHTML"> タブ３ </div></td><td style="width:100%;border-bottom:1px solid #000"> </td></tr><tr><td colspan="4"><div style="border-width:0 1px 1px 1px;border-style:solid;border-color:#000;background:#ffcccc;padding:10px;height:130px" id="NAME4"> ここにタブ１の文章 </div></td></tr></tbody></table> <div style="display:none" id="NAME11"> ここにもタブ１の文章 </div><div style="display:none" id="NAME22"> ここにタブ２の文章 </div><div style="display:none" id="NAME33"> ここにタブ３の文章 </div>
- ベストアンサー
- JavaScript
- onClickで画像を消し、下の部分を選択する方法
javascript超初心者です。 どなたか、解決法を教えて頂けないでしょうか？ ●解決したい事 onClickで画像を消し、position: absolute;で画像の下に配置した<div>コンテンツ</div>の部分を選択できるようにしたいのですが、どうも選択できません。 IEでは選択できるのですが、chrome、firefox、safariでは画像が被っていた部分は選択できず、画像が被っていない部分しか選択できない状態になります。 IEでは出来るので、他のブラウザでも出来るのではないかと思ってしまいます。 何を変えればいいのでしょうか？ どうか宜しくお願いします。 ソース抜粋 <body> <span onClick="this.style.visibility='hidden'"><img src="画像" width="1080" height="800" /></span> <div id="wrapper" style="position:absolute; top:0px" width="1080" height="1500"> コンテンツ </div> </body> 上記のソースのwrapper下側700px部分しか選択できないのです。 どうか宜しくお願いします！
- ベストアンサー
- JavaScript
- ボタンタグを作っているのですが…
<input style="font-size:15; width:150px; height:30px; top: 200px; left: 150px; position: absolute;" type="button" value="Top" style="border-width:4"> 上のように書き、topの後ろの値とvalueの中身だけ変えて、ボタンの数だけ並べてみたのですが、もっとすっきりした書き方はありませんか。<div style …と書いてみたりいろいろやってみたのですが、うまくいきません。 また、font-sizeの後ろの15は何でしょうか。ptやpxなら単位が必要だと思うのですが。さらに、値を変えてもフォントの大きさが変わらないのですが、なぜでしょうか。 よろしくお願い致します。
- ベストアンサー
- ホームページ作成ソフト
- 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
- このタグですが、左右一杯に広がったまま、左方向にページを伸縮しても
このタグですが、左右一杯に広がったまま、左方向にページをちじめても、左右にページ一杯のまま、伸縮するようになりませんか？ <BODY> <DIV style="top : 0px;left : 0px; position : absolute; z-index : 1; " id="Layer1"> <DIV> <TABLE> <TBODY> <TR> <TD bgcolor="#ffcccc" height="130" width="750"></TD> </TR> </TBODY> </TABLE> </DIV> </DIV> <DIV style="top : 41px;left : 151px; position : absolute; z-index : 2; width : 397px; height : 43px; " id="Layer2" align="center"><FONT size="+3">テキスト</FONT></DIV> </BODY>
- ベストアンサー
- HTML
補足
ありがとうございます。 対象のhtml, jsファイルをclearA()に変更しました。しかし、呼び出せませんでした。 function定義前の"確認前"のだけが、表示されました。 1本のaspxファイルで、js、htmlタグを定義していますが順番などが関係あるのでしょうか? //jsファイル alert("確認前"); function clearA(btnNo){ alert("確認"); if(btnNo == 1) { document.getElementById("TextBox1").value = "" } else if (btnNo == 2) { document.getElementById("TextBox2").value = "" } }