ボタンクリック時の処理ができない

前へ 次へ
このQ&Aのポイント
  • 作成したcleartest()が呼ばれません。function定義の直後に、alert()を入れてもダイアログボックスの表示ができずに機能しません。
  • 分からないのはfunction定義の直前に、cleartest()を加えるとダイアログボックスの表示が出ますが、ボタンを押下してもクリア処理ができません。
  • どのような事を考慮すれば良いですか? また、代替案はどのような方法がございますか?
回答を見る
  • ベストアンサー

ボタンクリック時の処理ができない

作成した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 = "" } }

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

  • ベストアンサー
  • yambejp
  • ベストアンサー率51% (3827/7415)
回答No.2

微妙な感じですが文法エラーなどで処理が止まっている可能性もあるので firefoxのfirebugなどでデバッグすることをお勧めします

genesis50
質問者

お礼

関数が未定義になっていました。 <INPUT>タグの後に、外部jsファイルを移して解決しました。

その他の回答 (2)

  • fujillin
  • ベストアンサー率61% (1594/2576)
回答No.3

動くと思いますよ。 具体的にどのように設置しているのかわかりませんが、質問者様が考えていないところに問題があるのかも。 簡略化してテストしました。 （要素にidが同じものがありますが、HTMLの文法違反です） <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="ja"> <head><title>sample</title> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <script type="text/javascript"> function cleartest(btnNo){ if(btnNo == 1){ document.getElementById("TextBox1").value = ""; } else if (btnNo == 2) { document.getElementById("TextBox2").value = ""; } } </script> </head> <body> <div> <textarea id="TextBox1">text1</textarea> <input type="button" tabindex="1" value="クリア" onclick="cleartest(1);"> </div> <div> <textarea id="TextBox2">text2</textarea> <input type="button" tabindex="2" value="クリア" onclick="cleartest(2);"> </div </body> </html>

genesis50
質問者

お礼

<INPUT>タグの後に、外部jsファイルを移して解決しました。

  • Ogre7077
  • ベストアンサー率65% (170/258)
回答No.1

良く分かりませんが、属性 runat が邪魔な気がします そもそも指定する必然性がないので、削除してはいかがでしょうか あと、属性 id が複数の要素で重複しています あと、属性 title は <input> にあるべきでしょう あと、属性 tabindex はちゃんと順番を指定するべきです あと、属性 style が大きすぎるので css 化を検討すべきです

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

関連するQ&A

  • 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 = "" } }

  • 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をしている者です。 さっそくですが質問させていただきます あとだしじゃんけんを作っているのですが、 キーコードによって、グー、チョキ、パーを表示させることが できません・・・ 以下のコードの悪い点を指摘していただけないでしょうか よろしくお願いします <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>

  • ボタンの配置

    初心者の問題ですが。。 ページの中央にボタン配置したいときはどのタグ使うでしょうか。 <asp:Button id="cmdSubmit" style="Z-INDEX: 105; LEFT: 100px; POSITION: absolute; TOP: 400px"runat="server" Text="送信" Width="128px"></asp:Button> <asp:Button id="cmdCancel" style="Z-INDEX: 106; LEFT: 350px; POSITION: absolute; TOP: 400px"runat="server" Text="キャンセル" Width="128px"></asp:Button> LEFTのところcenterに変えてみたんですがだめでした。。。 教えてください。 よろしくお願いします。

  • ひとつのボタンでタイマーを動かしたり止めたりしたいのですが

    ひとつのボタンでタイマーを動かしたり止めたりしたいのですが こんにちは 趣味でjavascriptをしているものです 以下のサイトから、テトリスのコードをダウンロードしたのですが、 http://java.aimary.com/ このjavascriptの動くhtml内に　 gameInterval(ゲーム内のタイマー変数）を 使って、ポーズボタンのようなものを追加したいと思ったのですが、 以下のコードのようにすると、いったん停止したとおもったら、 再びタイマーが呼び出され、何度も押すと、タイムインターバルが 短くなっていきました。 //headに追加 function clear_timer() { var obj = document.getElementById("timer_control"); clearInterval( gameInterval ); obj.detachEvent('onclick', clear_timer); obj.attachEvent('onclick', set_timer ); } function set_timer() { var obj = document.getElementById("timer_control"); obj.detachEvent('onclick', set_timer ); obj.detachEvent('onclick', clear_timer ); gameInterval = window.setInterval("Handle_Interval()", (maxspeed-speed+1)*60); obj.attachEvent( 'onclick', clear_timer ); } //bodyに追加 <div style='position:absolute; left:520px; top:100px;'> <form name='Form1'> <input type="button" id="timer_control" value="pause" onclick="JavaScript:clear_timer();"> </form> </div> おそれいりますが、どなたか、正しい記述の仕方を 教えていただけないでしょうか？ よろしくおねがいします。

  • メニュー3つとも個々にドロップして移動したいのですが

    メニュー3つとも個々にドロップして移動したいのですが、どのように すれば良いのでしょうか。 お願いします。 <html> <head> <title>ドラッグして画像を移動する</title> <script type="text/javascript"><!-- //2つ適応 window.onload=function(){ flag = false; offx = 80; offy = 100; document.getElementById("menu1").onmousedown= function dragOn(){ flag = true;} window.document.onmousemove = dragImg; window.document.onmouseup = dragOff; function dragOff(){ flag = false; } function dragImg(){ if (!flag) return; document.getElementById("menu1").style.top = event.y-offx; document.getElementById("menu1").style.left = event.x-offy; return false;} } // --></script> </head> <body> <div id="menu1" style="background-color:red; position:absolute; width:120px;height:150px;">メニュー1</div> <div id="menu2" style="background-color:green; position:absolute;top:200px;width:120px;height:150px;">メニュー2</div> <div id="menu3" style="background-color:blue; position:absolute;top:400px;width:120px;height:150px;">メニュー3</div> </body> </html>

  • javascriptで困っています。教えてください

    javascriptでimgタグの位置を変更しようと考えています。上、下の表示（divタグ）をクリックして上下に10pxずつ移動させたいのですが、どのようにしていいのかよく分かりません。 document.getElementById("kt").style.top = document.getElementById("kt").style.top-10; の部分に無理があるのでしょうか？ 教えていただきたいと思い、投稿させていただきました。よろしくお願いします。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=480"> <style type="text/css"> <!-- #wrapper{ width:640px; height:480px; position:relative; } #kt{ width:250px; height:250px; position:absolute; top:100px; left:100px; } #up{position:absolute; z-index: 1;top:0px;width:20px;height:20px;background-color:#F00;} #down{position:absolute; z-index: 2;top:30px;width:20px;height:20px;background-color:#F00;} --> </style> </head> <body> <div id="wrapper"> <div id="up">上</div> <div id="down">下</div> <img id="kt" src="kt.png"> </div> <script type="text/javascript"> var up_element = document.getElementById("up"); up_element.addEventListener("click", touchUp, false); function touchUp() { document.getElementById("kt").style.top = document.getElementById("kt").style.top-10; 　　　　} var down_element = document.getElementById("down"); down_element.addEventListener("click", touchDown, false); function touchDown() { document.getElementById("kt").style.top = document.getElementById("kt").style.top+10; } </script> </body> </html>

  • このタグですが、ページを右端から左へ縮めても、常に中央に位置させたいのですが、、

    このタグですが、ページを右端から左へ縮めても、常に中央に位置させたいのですが、、、 <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
  • Firefoxで表示できないのは何故でしょう？

    お世話になります IE6、Operaでは表示できたのですがFirefoxでは表示できませんでした（＞＜） 何か見落としがあるのでしょうか？ <script language="javascript"> <!-- window.onload = function() { n=document.getElementById("div1").innerText; if(n == "a0"){ document.getElementById("img1").style.display = "block"; document.getElementById("img1").style.top = "100px"; document.getElementById("img1").style.left = "100px"; } if(n == "a"){ document.getElementById("img2").style.display = "block"; document.getElementById("img2").style.top = "100px"; document.getElementById("img2").style.left = "200px"; } } //--> </script> <div id="div1">a</div> <form action="test.cgi" method="post"> <input type="hidden"name="a" value="leap_day"> <input type="image" src="sample0.gif" id="img1" style="position:absolute;display:none;"> </form> <form action="test.cgi" method="post"> <input type="hidden"name="b" value="leap_day"> <input type="image" src="sample1.gif" id="img2" style="position:absolute;display:none;"> </form> n=document.getElementById("div1").innerText; if(n == "a0"){ } if(n == "a") { } を消すと表示はできるのですが・・・

  • ボタンタグを作っているのですが…

    <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なら単位が必要だと思うのですが。さらに、値を変えてもフォントの大きさが変わらないのですが、なぜでしょうか。 よろしくお願い致します。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する