• ベストアンサー

JavaScript Eventのタイミング

Eventの挙動を学ぶために、簡単なスクリプトを作成しました。 テキストボックスに文字列を入れて、Submitボタンを押すと、 テキストボックスの下に(innerHTMLで)入力文字が表示され、 ボタン自体も入力文字になるというものです。 しかし、テキストに文字を入力し、Submitを押してもボタン・innerHTMLともに文字は変化しません。このままリロードをすると変化します。 挙動からして、マウスクリック自体は反応していないが、リロードによりイベントハンドラが動作しているように見受けられます。 イベントハンドラはonclickに代入しているためなぜこのようになるのか わかりません。 できるだけ、JavascriptとHTMLを分離したく外だしのファイルで 実現したいと思っています。 考え方、(比較的平易な)参考資料などありましたら教えていただけないでしょうか？ HTMLで<body onload="init()">として、JavaScriptでは以下のように記述しています。 function init(){ document.getElementById("button").click = change(); } function change(){ keyword = document.getElementById("keyword").value; document.getElementById("input").innerHTML = keyword; document.getElementById("button").value = keyword; }

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

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

>document.getElementById("button").click = change(); というのはchange()の戻り値をオブジェクトのclickプロパティ（もしくはメソッド）に 代入しています。 とりあえず動かすには以下のいずれかがよろしいのでは document.getElementById("button").click = change; or document.getElementById("button").click = function(){change()};

sarusearch
質問者

お礼

おっしゃるとおり、戻り値になっていました。。 直りました。ありがとうございます

その他の回答 (1)

回答No.1

.clickが.onclickではなかろうか？ へんすうには、varをつけるべきとか。

sarusearch
質問者

お礼

ありがとうございます。onclickにしてみました

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

関連するQ&A

  • javascriptであるボタンを押すと他のボタンの表記が変わるというプログラムをつくりたいのですが。

    モと表示された１個のボタンと穴と表示された２個のボタンを用意する。モのボタンをクリックするとそのボタンの法事は穴に変わり、残り２つの穴のどれかがモに変わる。穴のボタンをクリックされても何も変わらないプログラムをつくりたいのです。 最初の状態からモをクリックして他のボタンを変化させることはなんとかできたのですが、そのあと移動したモをおしても同じことをできるようにするのができなくて困ってます。 あと、できたらモを押して２つの穴のどちらかがモにかわるとき穴からモにかわるボタンは左側のもの、とかは決まってないでランダムだとうれしいです＞＜ おねがいします！！！ 全然違うかもしれませんが、つくってみたのものっけておきます <html> <head> <title></title> <script type="text/javascript"> var moFlg = true; function func(){ if (moFlg) { document.getElementById("btn01").innerHTML = "穴"; document.getElementById("btn02").innerHTML = "モ"; document.getElementById("btn03").innerHTML = "穴"; moFlg = !moFlg; } else { document.getElementById("btn01").innerHTML = "穴"; document.getElementById("btn02").innerHTML = "穴"; document.getElementById("btn03").innerHTML = "モ"; moFlg = !moFlg; } } </script> </head> <body> <button id="btn01" type="button" " onClick="func()"> モ </button> <button id="btn02" type="button" " onClick=""> 穴 </button> <button id="btn03" type="button" " onClick=""> 穴 </button> </body> </html> ここまでです。 でもできたら<input type ～ button　～ onClick>とかがつかわれているとうれしいです。

  • JavaScriptのイベントについて

    JavaScriptを使ってページのウィンドウ上でダブルクリックをした時 テキスト1の文字列を変更するようにしたいのですが、 下記のページを読み込むとページがロードすると同時に テキスト部分が変更されてしまいます。 addEventListenerの使い方が間違えているのでしょうか。 よろしくお願いいたします。 ---------------------------------------------------------------------- <body> <a id=id1>テキスト1</a> <script> i = document.getElementById("id1"); document.addEventListener("dblclick", addEL(), !1); function addEL(){ i.innerHTML="addEventListener!"; } </script> </body>

  • 【javascript】document.getElementByIdは一つしか使えないの？

    以下をhtmlをブラウザで見ると、文字列"aaa"は表示されますが、"bbb"は表示されません。 <html> <head> <SCRIPT LANGUAGE='JavaScript1.2'><!-- function init(){ document.getElementById("a").innerHTML="aaa"; document.getElementById("b").innerHTML="bbb"; } //--></script> </head> <body onload="init()"> <div id="a"></dev> <div id="b"></dev> </body> </html> ブラウザはＩＥ，ＦＦと試しましたが共に同じ結果でした。 ＦＦのエラーコンソールには document.getElementById("b").innerHTML="bbb" is null のエラーメッセージが出てましたが、文法的に何が問題なのでしょうか？

  • JavaScript表示切替の問題

    ボタンを押すたびに、こんにちはとこんばんはが切り替わるようにしたいのですが、 切り替わりません。なぜかわかる方がいたら教えて頂けると助かります。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> </head> <body> <div id="1">こんにちは</div> <input type="button" value="切替" onclick="func_switch()"> <script language="javascript" type="text/javascript"> function func_switch(){ if(document.getElementById(1).innerHTML="こんにちは"){ document.getElementById(1).innerHTML="こんばんは"; } else{ document.getElementById(1).innerHTML="こんばんは"; } } </script> </body> </html>

  • 入力された文字列からリンクタグを生成

    お世話になります。 ブラウザから、一行テキストに入力された文字列を使用してリンクタグを生成する挙動を構築していますが、肝心のリンクタグ（ aタグ等 ）が反映されずに悩んでいます。 普段PHPでプログラミングを行っていますので、一旦PHPで変数に置き換えたり、データベースを介したり様々な方法を試みましたが、中々うまくいかずにいます。 -- 【 JavaSの定義箇所 】 ------------- <script type="text/javascript"> <!-- function textcopy(){ var text1 = document.getElementById("text1").value; document.getElementById("text1").value = ""; text1 = document.getElementById("insert1").innerHTML + text1; document.getElementById("insert1").innerHTML = "<div>" + text1 + "</div>"; var text2 = document.getElementById("text2").value; document.getElementById("text2").value = ""; text2 = document.getElementById("insert2").innerHTML + text2; document.getElementById("insert2").innerHTML = "<div>" + text2 + "</div>"; var text3 = document.getElementById("text3").value; document.getElementById("text3").value = ""; text3 = document.getElementById("insert3").innerHTML + text3; document.getElementById("insert3").innerHTML = "<div>" + text3 + "</div>"; var text4 = document.getElementById("text4").value; document.getElementById("text4").value = ""; text4 = document.getElementById("insert4").innerHTML + text4; document.getElementById("insert4").innerHTML = "<div>" + text4 + "</div>"; var text5 = document.getElementById("text5").value; document.getElementById("text5").value = ""; text5 = document.getElementById("insert5").innerHTML + text5; document.getElementById("insert5").innerHTML = "<div>" + text5 + "</div>"; } //--> </script> -- 【 form部品の箇所 】 -------------- <form> <input type="text" id="text1" value="<a href='"> <input type="text" id="text2"> <input type="text" id="text3" value="'>"> <input type="text" id="text4"> <input type="text" id="text5" value="</a>"> <br /> <div id="insert1" style="display: inline-block;"></div> <div id="insert2" style="display: inline-block;"></div> <div id="insert3" style="display: inline-block;"></div> <div id="insert4" style="display: inline-block;"></div> <div id="insert5" style="display: inline-block;"></div> <button type="button" onclick="textcopy()">submitする</button> </form> ------------------------------- 例えば、 【 <a href='http://www.hoge.com'>テスト</a> 】の様に返したいのに、 【 http://www.hoge.com'>テスト 】と返ります。 HTMLタグは特殊文字に変換してみましたが、結果は同じでした。 因みにこの挙動がうまくいったら、type属性はhiddenにして隠し要素にするつもりでした。 恐らくこの様な面倒くさい構文より簡単な書き方があるかと思いますが、 今までJavaScript自体殆どタッチしていませんでしたので、調べながら 自分で構築してみました。 ご教示の程、どうぞよろしくお願い申し上げます。

  • イベントハンドラ関数について

    現在VC++/CLR　2005　でプログラミングをしています。 基本的な事柄かもしれませんが、質問させてください　 以下の２つのボタンのイベントハンドラ関数があった場合 //ボタン１のイベントハンドラ関数 private: System::Void button1_Click(System::Object^ sender, System::EventArgs^ e) String^ str = textBox1->Text } //ボタン２のイベントハンドラ関数 private: System::Void button2_Click(System::Object^ sender, System::EventArgs^ e) { } ボタン２をクリックしたときの動作とボタン１の動作を同じにしたいと思っています。 その場合は private: System::Void button1_Click(System::Object^ sender, System::EventArgs^ e) String^ str = textBox1->Text } //ボタン２のイベントハンドラ関数 private: System::Void button2_Click(System::Object^ sender, System::EventArgs^ e) { String^ str = textBox1->Text } のようにボタン２のイベントハンドラ関数をボタン１と同じように書けばいいのですが イベントハンドラ関数の処理が膨大になった場合を考えて省略する 書き方は無いのでしょうか？(以下の場合ですとエラーが起こってしまいます。) private: System::Void button2_Click(System::Object^ sender, System::EventArgs^ e) { button1_Click(); } 宜しくお願いします

  • JavaScriptでとても簡単なことだと思うのですが…

    どういう風に検索かければ言いかわかりませんでした。 フレーム1と2に分けて、フレーム1でボタンを押すとフレーム2のテキストボックスの中に文字を入力する。という物を作っています。 下記はフレーム1の内容の一部です。本当に簡単な質問だとおもいます。 <frame> <input type="button" value="ボタン1"onclick="window.parent.frame2.document.getElementById('txt1').value='おはようございます。'"> </frame> <frame> <input type="button" value="ボタン2"onclick="window.parent.frame2.document.getElementById('txt2').value='おやすみなさい。'"> </frame> この場合ボタンが二つ表示されるのですが、ここをボタンひとつでこの二つの処理を同時に実行させたいのです。 お力お貸しください。

  • ボタンに書かれている文字の入れ替え

    ２つのボタンのどちらを押しても、ボタンに書かれているアルファベットが入れ替わるようにしたいのですが、うまくいきません。 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でchromeだけ挙動が違うので動作を分離しようと考えています。 問題点はsubmit()の後、処理を抜けてしまう点です。 下記'問題の箇所'の行が実行されません(1行前のsubmit()の時点で関数を終了する) 何か対応策はないでしょうか？ ※エッジ、IE、Foxは期待通りの動作です -----jsファイルの内容---- function Key_on(keyCode){ if(keyCode == 13){ var userAgent = window.navigator.userAgent.toLowerCase(); if (userAgent.indexOf('chrome') != -1) { document.forms[txt_submit].submit(); document.getElementById('ctxt').value= '';←問題の箇所 }else{ document.txt_submit.submit(); document.getElementById('ctxt').value= ''; } } } function send(){ document.txt_submit.submit(); document.getElementById('ctxt').value= ''; } -----htmlの内容---- <form id="txt_submit" name="txt_submit" action="log.cgi" method="post" target="log" autocomplete="off"> <input type="text" id="ctxt" name="ctxt" size="20" value="" onkeydown="Key_on(event.keyCode)"> <input type="button" value="送信" onclick="return send();"> </form>

  • formのsubmitイベントの発生についての質問です。

    formのsubmitイベントの発生についての質問です。 あるところで、「form.submit() は submit イベントを発火しない」 とあったので、 ↓のscriptで、formのsubmitイベントを調べていました。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>SessionTestNext</title> <style type="text/css"></style> <script type="text/javascript"> function send1(elm){ 　elm.form.submit(); } function send2(){ 　document.getElementById("form1").submit(); } if('undefined' !== typeof document.addEventListener){ 　document.addEventListener('submit', function(event){ 　 var target = event.target; 　 alert(target.id); 　}, false); } else if ('undefined' !== typeof document.attachEvent){ 　document.attachEvent('onSubmit', function(event){ 　var target = event.srcElement; 　alert(target.id); 　}); } </script> </head> <body> <p>SessionTestNext 1 </p> <form id="form1" action="/php/session2.php" method="post" onsubmit="alert('Submited!');return false;"> <input type="text" name="parm2" value="fugafuga"> <input type="submit" value="サブミット"> <button onclick="send1(this)">Javascriptサブミット(1)</button> </form> <button onclick="send2()">Javascriptサブミット(2)</button> </body> </html> だのに、 send1()を実行した時は、イベントが検知され'Submited!'がアラートします。 ただし、onsubmitのハンドラーでfalseを返してるので、サブミットしません。 send2()を実行した時は確かに、submitイベントは発生せず、'Submited!'の アラート無しで、実際サブミットされます。 documentにaddEventListenerで追加したハンドラーの方でも、send1()の 時だけ検知され'form1'がアラートします。 　send1()で検知されるのは何故でしょう？ また、IEでも同様の動作なんですが、何故か　document.attachEvent('onsubmit', の方が、まったく動きません。（タイポかも）

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する