JavaScriptのイベントについて
- JavaScriptを使ってページのウィンドウ上でダブルクリックするとテキスト1の文字列が変更されてしまう問題について
- addEventListenerの使い方についての質問。ページがロードされると同時にテキスト部分が変更されてしまう原因を教えて欲しい
- JavaScriptでダブルクリックイベントを処理するためにaddEventListenerを使っているが、テキストがロード時に変更されてしまう問題が発生している
- ベストアンサー
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>
- hwbigin
- お礼率28% (41/143)
- JavaScript
- 回答数4
- ありがとう数0
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
おすすめはこれです。 <body> <a id="id1">テキスト1</a> <script type="text/javascript"><!-- var addEvent; if(window.addEventListener) addEvent=function(element,type,listener,useCapture){ element.addEventListener(type,listener,useCapture); }; else if(window.attachEvent) addEvent=function(element,type,listener){ element.attachEvent('on'+type,listener); }; else addEvent=function(element,type,listener){ var temp='on'+type; if(temp in document)element[temp]=listener; }; var i=document.getElementById('id1'); function addEL(){ i.innerHTML='addEventListener'; } addEvent(document,'dblclick',addEL,false); //--></script> </body>
その他の回答 (3)
- babu_baboo
- ベストアンサー率51% (268/525)
var i = document.getElementById ("id1"); document.addEventListener("dblclick", addEL, !1); function addEL (){ i.innerHTML="addEventListener!"; } しようする へんすうの まえには、var をつけましょう みじかく かくのは すきですが、もし !1 が、るーぷの なかに ある ばあいは、まいかい ひょうか されるますよ。 この ばあい、へんすう i は、ぐろーばるへんすうです。 ぐろーばるへんすうの しようは、どこかで かきかえられるかも しれないので、おすすめ できません。 もし、それがいやで いかのように したと します (function () { var i = document.getElementById ("id1"); document.addEventListener("dblclick", addEL, false); function addEL (e) { i.innerHTML="addEventListener!"; // このかんんすうのなかから、i をさんしょうできますが、その i が、html ようそをほじしているから } }) (); しかし、これは メモリーリークパターンになります。 （げんざいは、かいしょうされているものもあるそうですが） この かんすう addEL の だい１ひきすうに わたされる e （いべんとおぶじぇくと）から たくさんのじょうほうを しる ことが できます。 その かんすうの なかで、いかの ように すれば、document さえ しゅとく できます。 function addEL (e) { var doc = (e.target||e.srcElement).ownerDocument; var i = doc.getElementById ("id1"); } -- こじんてきな いけん。 var addEvent = function () ～ ですが、こうほうごかんを きにする あまり、attachEvent では、useCapture が つかえず、 var temp='on'+type; これを つかう ばあいは、ふくすうの とうろくも できず、 おなじかんすうめいでありながら おなじ きのうが いじできない ものに なります。 element が document なら まだ よいと おもいますが、とくていの HTML ようそなら メモリーリークパターン に みえて（かってなおもいこみです） さむけが します（げんざい、かぜひいている せいも あり）
- yambejp
- ベストアンサー率51% (3827/7415)
イベントを渡したりすることを考えると無名関数を使ったほうがよいかも <a id=id1>テキスト1</a> <script> document.addEventListener("dblclick", function(e){addEL(e)}, false); function addEL(e){ alert("イベントタイプ:"+e.type); alert("ターゲット:"+(e.target||e.srcElement).nodeName); i = document.getElementById("id1"); i.innerHTML="addEventListener!"; } </script>
- ibara994
- ベストアンサー率75% (9/12)
addEventListenerの第2引数で「addEL()」と記述すると addEL関数を実行して、その戻り値を、第2引数へ渡す事になってしまいます。 addELをイベントリスナーとして追加するなら、括弧()は要りません。
関連するQ&A
- JavaScriptの論理演算子について
JavaScriptの論理演算子について質問です。 「alert(e.target||e.srcElement);」の結果がtrue かfalseではなくて「object HTMLHtmlElement」となるのは何故なのでしょうか？ JavaScriptでは"||"は論理演算子ではないのでしょうか？ ----------------------------------------------------------------------- <body> <a id="id1">Textarea</a> <script> (function () { var i = document.getElementById ("id1"); document.addEventListener("dblclick", addEL, false); function addEL (e) { alert(e.target||e.srcElement); } }) (); </script> </body>
- ベストアンサー
- JavaScript
- javascriptで困っています
スマホでタッチした場所の座標を取得しようとしているのですが、いろいろ調べて以下のように作ってみましたが、座標が取得できません。どこを直せばいいのか、教えていただきたく投稿させていただきました。よろしくお願いします。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"/> <meta name="viewport" content="width=320, user-scalable=no" /> <script type="text/javascript" charset="utf-8"> var touch_box = document.getElementById("box"); touch_box.addEventListener("touchstart", function(e){ document.getElementById("txt0").innerHTML = "スタート"; document.getElementById("txt1").innerHTML = e.pageX; document.getElementById("txt2").innerHTML = e.pageY; }, false); touch_box.addEventListener("touchmove", function(e){ document.getElementById("txt0").innerHTML = "ムーブ"; document.getElementById("txt1").innerHTML = e.pageX; document.getElementById("txt2").innerHTML = e.pageY; }, false); touch_box.addEventListener("touchend", function(e){ document.getElementById("txt0").innerHTML = "エンド"; document.getElementById("txt1").innerHTML = e.pageX; document.getElementById("txt2").innerHTML = e.pageY; }, false); </script> </head> <body> <div id="box"> <span id="txt0"></span><br /> X:<span id="txt1"></span>, Y:<span id="txt2"></span><br /> </div> </body> </html>
- ベストアンサー
- JavaScript
- 【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
- 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; }
- ベストアンサー
- JavaScript
- 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>
- ベストアンサー
- JavaScript
- javascriptで編集可能不可能の切り替え
いつもお世話になっております。 javascriptを用いて、テキストボックスを状況によって編集可能、不可能を 変更するものを作っております。 現在、テキストボックス単品ではその動作が可能となっていますが、 複数のものに対してその動作を行うには、どうすればよいかわからず困っています。 現在のソースは以下のようになっています。必要な部分だけ抜き出しています。 <script type="text/javascript"> function display() { var tmp = prompt("password?",""); //表示させるかどうか判別する if (tmp == 1) { document.getElementById("textboxのID").readOnly = false; } else if (tmp == 2) { document.getElementById("textboxのID").readOnly = true; } } </script> <body onload="display();"> ・・・・ </body> テキストが一つや二つ程度ならこれでも十分ですが、今回は テキストボックスが多数(100程度)あるので、このまま地道にやるのはどうかと思いました。 IDを数字にして、 for (var i = 0; i < 100; i++) { document.getElementById(i).readOnly = true; } とやってみましたが、これもdocument.getElementById("0") = true;単品では 成功しましたが、iが定義されていないというようなエラーメッセージが表示されて、 うまくいきませんでした。 以上の件を、ご教授お願いします。
- ベストアンサー
- JavaScript
- javascriptの条件文
スマホにタッチした時の値を取得するスクリプトです。 よくわからないまま作成してますが、ご勘弁下さい。 <script type="text/javascript"> window.document.addEventListener("touchstart", function(event){ event.preventDefault(); var result = document.getElementById("result"); result.innerHTML = "clientX:"+ event.touches[0].clientX+ "<br>" + "clientY:"+ event.touches[0].clientY; }, true); window.document.addEventListener("touchmove", function(event){ event.preventDefault(); var result = document.getElementById("result"); result.innerHTML = "clientX:"+ event.touches[0].clientX+ "<br>" + "clientY:"+ event.touches[0].clientY; }, true); window.document.addEventListener("touchend", function(event){ event.preventDefault(); var result = document.getElementById("result"); result.innerHTML = ""; }, true); ここまでは正常。 値を取得した、Yを下記のようにしたのですが、 500以上になってもロケーションが実行されません。 間違いなく構文が間違っているのですが、数時間格闘したのですが、わからないので すみませんが、教えて頂けると有難いです。 num = event.touches[0].clientY; if (num >= "500") { location.href = "https://www.google.co.jp/"; } </script>
- ベストアンサー
- JavaScript
- innerHTMLの初期値
下記のソースがあります。 <SCRIPT TYPE="text/javascript"> <!-- function Change(id){ if(document.all){ document.all.result.innerHTML = document.all(id).innerHTML; }else if(document.getElementById){ document.getElementById('result').innerHTML = document.getElementById(id).innerHTML; } } //--> </SCRIPT> <a href="#" onClick='Change("ih2"); return false'>前</a><br> <a href="#" onClick='Change("ih3"); return false'>次</a><br> <div id="ih2" style="display:none">テキスト1</div> <div id="ih3" style="display:none">テキスト2</div> <br> <span id="result"></span> 前、次のリンクで表示されるテキストが切り替わるようにしているのですが、 クリックする前の段階では何も表示されていない状態です。 そこで、クリックする前でもid="ih2"の「テキスト1」が表示されている状態にしたいのですが、 なかなか出来ません。 functionの前に document.all.result.innerHTML = document.all.ih2.innerHTML; と記述してみましたが駄目でした。 id="ih2"の値を読み込んで表示させたいのですが、 何か良い方法はありませんか。
- ベストアンサー
- JavaScript
- JavaScript内からJavaScriptを書き出したいのですが
こんにちは． JavaアプレットとJavaScriptを利用してJavaScriptを書き出すコードを書いてみたのですが，うまく動きません．具体的なコードは以下のようで，リンクはできるのですが，マウスを乗せるとオブジェクトを指定してくださいとエラーがでます．innerHTMLでJavaScriptを書き出すことはできないのでしょうか？ <html> ・・・ <body> <SCRIPT language="JavaScript" type="text/javascript"> <!-- function dWrite(){ str='<script type="text/javascript">functionLinkMo(){varLM1;LM1=window.open"","Doc","toolbar=no,location=no,kdirectories=no,width=300,height=250");LM1.document.write"<html><head><title></title></head><body>testです/body></html>");LM1.document.close();}</script><body>rinku <ahref="#"onMouseOver="LinkMo()">ここにのせると</a></body></html>'; document.getElementById("here").innerHTML=str;} //--> </script> <applet ・・・dWriteを呼び出す></applet> <div id="here" style="position:absolute;width:600px; left:0px;top:0px;"> </div></body></html>
- ベストアンサー
- JavaScript
- 同じメソッドを複数回、呼び出しは可能でしょうか
<script> var arg = new Object, p = location.search.substring(1).split('&'); for(var i=0; p[i]; i++){ var kv = p[i].split('='); arg[kv[0]] = kv[1]; } window.onload = function (){ if(01 == arg.id){document.getElementById("type").innerHTML = "あなたはＡ型";} else if(02 == arg.id){document.getElementById("type").innerHTML = "あなたはＢ型";} else if(03 == arg.id){document.getElementById("type").innerHTML = "あなたはＯ型";} else if(04 == arg.id){document.getElementById("type").innerHTML = "あなたはＡＢ型";} else {document.getElementById("type").innerHTML = "わかりません";} } </script> サイトへの表示は <span id="type"></span> と記述することで、問題なく表示ることができています。 しかし、これを複数個所に記述すると 最初の箇所しか表示しません。 同じページの複数の箇所（希望は４か所）に表示させるためには、 どのようにすればよいのでしょうか。
- ベストアンサー
- JavaScript
