• ベストアンサー

onchangeイベントを強制的に発生させる

お世話になります。 onchangeイベントをjavascriptで強制的に動作させたいと思っております。 発生させたい場合 ・ユーザーがtextボックスを入力 ・リンクボタンを押下した場合 簡単なことなのかもしれませんが、 ご教授よろしくお願いいたします。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <script type="text/javascript"> function change(){ alert('test'); } function update(){ document.getElementById('1').value = "update"; document.getElementById('1').onchange = change; } </script> <input id="1" type="text" value="1" onchange="change();"> <a href="javascript:update();">update</a>

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

  • ベストアンサー
  • venzou
  • ベストアンサー率71% (311/435)
回答No.2

回答は出てますが・・・onchangeにこだわるなら、 document.getElementById('***').onchange(); ()を付ければ呼び出せます。(Windows FireFox2、Opera8で確認) var f = document.getElementById('***').onchange; f(); IE6の場合はいったん変数に代入する必要があるようです。

bakenshibakenshi
質問者

お礼

venzou様、ご教授有難う御座います。 document.getElementById('***').onchange(); でよかったんですね。 勉強になりました。 どうも有難う御座います。

その他の回答 (1)

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

いきなり余談ですがidは数字から始まる文字列はNGのはずです。 さて、onChangeを強制的に・・・っていうのは意味がわかりません たんじゅんにonChangeで呼んでるchage()関数を呼べばよいのでは? <script type="text/javascript"> function change(){ alert('test'); } function update(){ document.getElementById('id1').value = "update"; change(); } </script> <input id="id1" type="text" value="1" onchange="change();"> <a href="javascript:update();">update</a>

bakenshibakenshi
質問者

お礼

yambejp様、ご教授有難う御座います。 わたくしの説明の仕方がまずかったですね。 javascript側からonchagenイベントを操作したかったのです。 どうも有難う御座いました。

関連するQ&A

  • javascriptにてHTMLのhiddenエリアのvalueを変更したい

    javascriptにてHTMLのHIDDENエリアのVALUEをフォームの値が変わるごとに更新していきたいのですが、やり方がいまいちわかりません。 <input type = "text" value="10" id="aaa" onchange=aaa();/> <input type = "text" value="20" id="bbb" onchange=aaa();/> <input type = "hidden" name="abc" value="aaa"/> <script> function aaa(){ document.abc.value = document.getElementById("aaa").value+document.getElementById("bbb").value ; } </script> このような感じで考えていますが、進みません。どなたかご教授お願いいたします。

  • エラーがわかりません。

    下記のHTMLの記述ですが、HTML内のvalueがうまく引き渡されません。 どなたかわかる方がおりましたら、教えてください。 <body> <p id="hoge">OASIS</p> <script type="text/javascript"> function change(){ var c=document.getElementById('submit').value; console.log(c); //document.body.bgColor="red"; } </script> <button onClick="change()" id="submit" value="1">Change</button> </body> </html>

  • 以下のタグはクリックすると画像が切り替わり、新しいウィンドウでgooト

    以下のタグはクリックすると画像が切り替わり、新しいウィンドウでgooトップへリンクするjavascriptです。 はじめて作ったタグなので無駄なところを教えてください また、同じウィンドウで開くにはどこをいじったらよいですか? <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html><head><title>web page title</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="Content-Language" content="ja"> <script type="text/javascript"> function change(){ document.getElementById("pic").src="2.jpg"; window.open("http://www.goo.ne.jp/");} </script></head> <body> <a href="javascript:change();"><img id="pic" src="1.jpg" alt="gooへリンク"></a> </body></html>

  • INPUTタグ以外からイベントハンドラを起動する方法

    はじめまして。 いろいろ調べたのですが、的確な答えが見つかりませんでしたので、ご教授お願いいたします。 訳あってonchangeイベントをタグの外から起動したいのですが、関数に括弧を付けると「実装されていません」というエラーが出てしまいます。 括弧を付けていない関数はうまく起動します。 どうしても関数に引数を渡してあげたいのですが、どのようにすればよいのでしょうか? 動作環境は IE5.5 windows2000 ASPにてJavaScriptを作成しています。 以下ソースを簡略化して記述しました。 よろしくお願いいたします。 <html> <head> <script TYPE="text/javascript"> <!-- function f_AAA(){ alert("AAA"); } function f_BBB(a_value){ alert(a_value); } --> </script> </head> <body> <form> <input type="text" name="text1" value="1"> <input type="text" name="text2" value="2"> <script TYPE="text/javascript"> <!-- // ↓括弧の付いていない関数は起動します。 document.forms[0].text1.onchange = f_AAA; // ↓括弧の付いている関数は起動しません。 document.forms[0].text2.onchange = f_BBB("OK"); --> </script> </body> </form> </html>

  • javascriptで、イベントが発生しない

    下記ソースで、address1をクリップボードから貼り付けても、 function changeaddress1() がよばれないのは、 なぜでしょか? また、からなず、呼ばれるイベントはありますでしょか? ****************************************************************** <html xmlns="http://www.w3.org/1999/xhtml" pageEncoding="UTF-8"> <head> <script type="text/javascript" charset="UTF-8"> function changeaddress1() { var strAddress1 = document.zip_form.address1.value; document.write("strAddress1:"+strAddress1); } </script> </head> <body> <form action="./" id="zip_form" method="post"> <input type="text" id="address1" name="address1" onChange="changeaddress1()> </form> </body> </html>

  • 同じようなのばかりだ申し訳ないのですが…javaに関してです。

    以下のようなプログラムを作成しました。3つのスクリプトを動作させたいのですがどうすればよいですか?また,画像のように(1)~(3)の和を算出するにはどうすればいいですか?助けて下さい。お願いします。 <html> <script type="text/javascript"> function hoge(){ var v1=document.getElementById('s1').value; var v2=document.getElementById('s2').value; var rslt; if (v1==1 && v2==1){ rslt=50; } else { if (v1==1 && v2==2) { rslt=47; } else { if (v1==2 && v2==1) { rslt=30; } else { rslt=20; }}} document.getElementById('txt1').value=rslt; } </script> <script type="text/javascript"> function hoge(){ var v1=document.getElementById('s1').value; var v3=document.getElementById('s3').value; var rslt; if (v1==1 && v3==1){ rslt=40; } else { if (v1==1 && v3==2) { rslt=80; } else { if (v1==2 && v3==1) { rslt=70; } else { rslt=10; }}} document.getElementById('txt2').value=rslt; } </script> <script type="text/javascript"> function hoge(){ var v1=document.getElementById('s1').value; var v4=document.getElementById('s4').value; var rslt; if (v1==1 && v4==1){ rslt=83; } else { if (v1==1 && v4==2) { rslt=53; } else { if (v1==2 && v4==1) { rslt=33; } else { rslt=13; }}} document.getElementById('txt3').value=rslt; } </script> <body> <select id="s1" onChange="hoge()"> <option value="1">1<option value="2">2 </select>   <select id="s2" onChange="hoge()"> <option value="1">1<option value="2">2 </select>   <select id="s3" onChange="hoge()"> <option value="1">1<option value="2">2 </select> <select id="s4" onChange="hoge()"> <option value="1">1<option value="2">2 </select><p> <input type="text" id="txt1" value=""><p> <input type="text" id="txt2" value=""><p> <input type="text" id="txt3" value=""> </body> </html>

    • ベストアンサー
    • Java
  • onChangeの使い方について教えてください。

    javascriptで困っています。助けてください。 テキストボックスに入力された値をonChangeで検出し、入力内容をチェックしようとしています。 テキスト入力後、テキストボックスからフォーカスを外せば、問題なく作動するのですが、 テキストを入力し、フォーカスを外さずに、そのまま送信ボタンを押すと、 チェック結果を待たずに、次のファイル(画面)に移ってしまいます。 多分、onChangeを使う上で、よく発生する問題かと思うのですが、 みなさん、どのように回避されているのでしょうか? <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=euc-jp"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <script type="text/javascript"> <!-- function check(){ alert('チェック'); } //--> </script> </head> <body> <form method="get" action="reg.php"> タイトル<br> <input type="text" name="title" onChange="check()"><br> <input type="submit" value="送信"><br> </form> </body> </html>

  • プルダウンをもう一つ増やしたい&フレームページで使用のため、別ウインドウで表示させたい

    ↓他サイトさんにてサンプルで置いてあったものを拝借して自分なりにやってみました。 1、これをさらにもうひとつプルダウンを選択させて他サイトへジャンプさせる場合はどのようにしたらよいですか。 2、フレームページで使うので、他サイトの表示を別ウインドウで表示させたいのですが、どのようにしたらよいですか。 よろしくお願いします。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN""http:///www.w3.org/TR/html4/frameset.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title></title> <script type="text/javascript" language="JavaScript"> <!-- function showthis(obj) { if(!obj) return false; if(document.getElementById) { document.getElementById("item1").style.display = "none"; document.getElementById("item2").style.display = "none"; document.getElementById("item3").style.display = "none"; document.getElementById(obj).style.display = "inline"; } else { return false; } } // --> </script> <style type="text/css"> #item1,#item2,#item3 { display: none; } </style> </head> <body> <form> <select onchange="showthis(this.value)"> <option selected="selected">選んでください</option> <option value="item1"></option> <option value="item2"></option> <option value="item3"></option> </select> <select id="item1" onchange="location=this.value"> <option selected="selected">選んでください</option> <option value=""></option> <option value=""></option> <option value=""></option> </select> <select id="item2" onchange="location=this.value"> <option selected="selected">選んでください</option> <option value=""></option> <option value=""></option> <option value=""></option> </select> <select id="item3" onchange="location=this.value"> <option selected="selected">選んでください</option> <option value=""></option> <option value=""></option> <option value=""></option> </select> </form> </body> </html>

  • html onchange

    下記のコードでf002は動きますが、f001が動きません。 scriptで作ったオプションメニューもonChangeが働くようにするには、いかがしたらよろしいでしょうか? <script language="JavaScript"><!-- function f001(){ if (document.test.s1.value==2) alert("2が入力されました"); } function f002(){ if (document.test.s2.value==2) alert("2が入力されました"); } var i,ht=[]; i=0; ht[i] = '<select onChange="f001()" id="s1" >'; for( var i=1; i<=5;) ht[i] = '<option value='+(i)+(i==1?' selected':'')+'>'+(i++)+'</option>'; ht[i] = '</select>'; document.write('s1 =', ht.join('')); // --></script> <form name="test"> s2 = <select onChange="f002()" id=s2> <option value=1 selected>1</option> <option value=2>2</option> <option value=3>3</option> <option value=4>4</option> </select> </form>

  • [JS] IEでjavascriptを呼び出せない

    ページの読み込み時にリンク先をjavascriptの関数に変更しています。 IEではlocalhostなら変更後の関数を呼び出せるのですが、 IPでアクセスすると変更後の関数を呼び出せていないようです。 FF/Chrome/Operaではいずれの場合もうまくいきます。 具体的には、IEで以下のhtmlを http://localhost/ で読み込むと"change"をクリックで"changed!"に変更される http://192.168.0.1/ で読み込むと"change"をクリックしても何も変わらない。 何が問題なのでしょうか。 +++問題のindex.html++++++++++++++++++ <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja"> <body> <a href="#" id="change">change</a> <div id="test">TEST</div> <div> <script type="text/javascript" src="./prototype.js"></script> <script type="text/javascript"> t = new test(); function test(){ var self = this; self.change = function(arg){ document.getElementById("test").innerHTML = "changed!"; return false; } } document.getElementById("change").setAttribute("onclick", "return t.change();"); </script> </div> </body> </html> +++++++++++++++++++++++++++

専門家に質問してみよう