- 締切済み
ループ内のaddeventlistner
reggaepuncの回答
- reggaepunc
- ベストアンサー率59% (64/108)
白熱してますね。すばらしい。 えーと私からは、楽して目的を果たす方法をご紹介します。 jquery.jsというありがたいjavascriptライブラリをうまく利用する方法です。 まぁ、こういう書き方もある、ということで、 頭の片隅に置いておいて下さい。 コピペで動きます。 ------------------- <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>test</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script> </head> <body> <script type="text/javascript"> var body = $('body'); var big3 = [ { name:"google", url:"http://google.com" }, { name:"yahoo!", url:"http://yahoo.com" }, { name:"bing", url:"http://bing.com" } ]; for( var i = 0; i < big3.length; i++ ) { var btn = $('<input type="button" value="' + big3[i].name + '">'); btn.click(function( e ) { return function() { alert( big3[e.val].name ); } }({ val : i })); body.append( btn ); } </script> </body> </html> ------------------- ※firefoxでしか確認してないです。
関連するQ&A
- なぜ、この場面で、ループ関数が必要なのでしょうか！
プログラムレベルは下の下です。 以下のＨＰはhtmlとphpプログラムのコラボレです。 "表示"タグをクリックすれば、 "Google" "Yahoo" " CBS News" "abc NEws" のタグが出てきて、クリックすれば、ホームページが見れるという 単純なHPです。 そこで、分からに事があります。 sample6.htmlの中に"for"関数がありますが、ループ関数が使われています。 このプログラムのからくりを勉強中ですが、現在ループでつまづいています。_ _ なぜ、この場面で、ループ関数が必要なのでしょうか！？ 以下プログラムです、宜しくお願いします。 ファイル名：sample6.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>配列とJSON</title> <script type="text/javascript" src="../lib/jquery-1.8.1.min.js"></script> <script type="text/javascript"> $(function (){ $("#exe").click(hello); }); function hello(){ $.get("sample6.php", {}, function(resp){ var json = eval(resp); var tags = ""; for (var i = 0; i < json.length; i++) { if(i==0){ tags +="<div>サーチ&ポータル</div>"; }else if(i==2){ tags +="<br/><div>USニュースサイト </div>"; } tags += '<a href="' + json[i].url + ' "> ' + json[i].name + '</a><br/>'; } $("#show").html(tags); }); ;} </script> </head> <body> <h2>配列、連想配列とJSON <input type="button" id="exe" value="表示 "/><h2> <p id="show"></p> </body> </html> ファイル名：sample6.php <?php $arr[0]["name"] = "Google"; $arr[0]["url"] = "http://www.google.co.jp/"; $arr[1]["name"] ="Yahoo!"; $arr[1]["url"] = "http://www.yahoo.co.jp/"; $arr[2]["name"] = "CBS News"; $arr[2]["url"] = "http://www.cbsnews.com/"; $arr[3]["name"] ="abc News"; $arr[3]["url" ]= "http://abcnews.go.com/"; header("Content-Type: text/javascript; charset=utf-8"); echo json_encode($arr); ?>
- ベストアンサー
- JavaScript
- addEventListenerで
window.addEventListener("load", addEvents, false); function addEvents() { for (var i = 0; i < 3; i++) { document.getElementById("hoge" + i).addEventListener("click", function() { check(i) }, false); } } ---- というコードで、イベントを追加したのですが hoge0をクリック -> check(3)を呼び出し hoge1をクリック -> check(3)を呼び出し hoge2をクリック -> check(3)を呼び出し となってしまいます。つまり、引数にループの最後の数字+1が渡されてしまいます。 どうしたらよいのでしょうか？
- ベストアンサー
- JavaScript
- 【AS3】配列を使って複数のボタンに別々のリンク先を指定するスクリプト
【AS3】配列を使って複数のボタンに別々のリンク先を指定するスクリプトを教えてください。 配列を使って、btn1、btn2、btn3というインスタンスに それぞれ別のリンク先を設定したいと思っています。 実際には15個以上のリンクボタンを設置したいので、 配列を使ってできるだけ短いスクリプトにしたいです。 ---------------------------------------------- for (var i:int = 1; i < 4; i++) { this["btn"+i].addEventListener( MouseEvent.CLICK , onClick ); } function onClick( event:MouseEvent ) { var url:Array = new Array(); url[1]="http://www.yahoo.co.jp"; url[2]="http://www.google.co.jp"; url[3]="http://www.goo.ne.jp"; for(var i:int = 1; i < 4; i++){ if (this ["btn"+i]) { var link:URLRequest=new URLRequest(url[i]); var target:String="_self"; navigateToURL(link,target); } } } ---------------------------------------------- 上のように記述してみたのですが、全てのボタンが 配列一番最後のリンク先（url3）になってしまいます。 ｔｒａｃｅで「i」を出力してみると 1 2 3 と出るので、 for(var i:int = 1; i < 4; i++){}で 全て繰り返してしまっているらしいことはわかりますが どこをどう修正すればいいのかわかりません； 初心者で恐れ入りますが、易しくご教示いただけると幸いです。
- ベストアンサー
- Flash
- 配列のループ展開
下記で配列内を検索しても、「存在しません」になります。 どこが、間違っているのでしょうか？ <?php for($i = 1; $i <= 42; $i++) { $seminar = "http://www.hoge.com/hoge/".sprintf("%04d", $i).".html"; echo $seminar; } $url = array( $seminar ); $myUrl = "http://www.hoge.com/hoge/0020.html"; if(in_array($myUrl, $url)){ echo "配列に".$myUrl."は存在します。"; } else { echo "配列に".$myUrl."は存在しません。"; } ?>
- ベストアンサー
- PHP
- ajaxが難しいです。
１ if (xhr.status === 200) { result.textContent = xhr.responseText; の部分がわからないのですが 自分で作った変数resultの中に通信に両方成功した場合サーバ側のPHPが生成したDOM要素を代入するという事をやっているのでしょうか？ その結果、処理結果を表記するhtml<div id="result"></div>の中に、代入された中身が表記されるという事ですか？ ２ 下記のloadstartとloadなどう違うのでしょうか？ xhr.addEventListener('loadstart', function() { // 画面に通信中と表記 result.textContent = '通信中...'; }, false); // 画面に通信中と表記 xhr.addEventListener('load', function() { result.textContent = xhr.responseText; }, false); 下記ソース ・ <?php sleep(3); print('こんにちは、'.$_REQUEST['name'].'さん！'); print('こんにちは、'.$_REQUEST['name2'].'さん！'); ?> ・ <!DOCTYPE html> <html> <head> <meta name="robots" content="noindex,noimageindex,nofollow"><!-- Onlysample --> <meta charset="UTF-8" /> <title>JavaScript本格入門</title> </head> <body> <form> <label for="name">名前：</label> <input id="name" type="text" name="name" size="15" /> <input id="btn" type="button" name="submit" value="送信" /> <label for="name">名前2：</label> <input id="name2" type="text" name="name2" size="15" /> <input id="btn2" type="button" name="submit" value="送信" /> </form> <div id="result"></div> <div id="result2"></div> <script src="scripts/hello_ajax.js"></script> </body> </html> // 非同期通信を行うための準備 document.addEventListener('DOMContentLoaded', function() { document.getElementById('btn').addEventListener('click', function() { var result = document.getElementById('result'); var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function() { if (xhr.readyState === 4) { if (xhr.status === 200) { result.textContent = xhr.responseText; } else { result.textContent = 'サーバーエラーが発生しました。'; } } else { result.textContent = '通信中...'; } }; /* xhr.addEventListener('loadstart', function() { result.textContent = '通信中...'; }, false); xhr.addEventListener('load', function() { result.textContent = xhr.responseText; }, false); xhr.addEventListener('error', function() { result.textContent = 'サーバーエラーが発生しました。'; }, false); */ xhr.open('GET', 'hello_ajax.php?name=' + encodeURIComponent(document.getElementById('name').value), true); xhr.send(null); }, false); document.getElementById('btn2').addEventListener('click', function() { var result = document.getElementById('result2'); var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function() { if (xhr.readyState === 4) { if (xhr.status === 200) { result.textContent = xhr.responseText; } else { result.textContent = 'サーバーエラーが発生しました。'; } } else { result.textContent = '通信中...'; } }; /* xhr.addEventListener('loadstart', function() { result.textContent = '通信中...'; }, false); xhr.addEventListener('load', function() { result.textContent = xhr.responseText; }, false); xhr.addEventListener('error', function() { result.textContent = 'サーバーエラーが発生しました。'; }, false); */ xhr.open('GET', 'hello_ajax.php?name2=' + encodeURIComponent(document.getElementById('name2').value), true); xhr.send(null); }, false); }, false); 最後に、クリックした際にJSでDOM生成して、新たな要素を表記することとajaxは、 閲覧者からすると同じように見えるのですが、 違いは、ajaxはブラウザ上で生成したのではなく、 サーバ側のPHPが生成したDOM要素をダウンロードして代入するという、違いでしょうか？ つまりサーバ側でDOMを作ったらajax、ブラウザ上で作ったらただのDOM生成という事ですか？
- ベストアンサー
- JavaScript
- 【AS3】ループ処理で関数名を作成するには？
ActionScript3.0についてご教授ください。 forなどを使い、ループ処理を使って変数名を作成する要領で 関数名を作ることは可能なのでしょうか？ やりたい処理を記述させて頂きますと次の通りです。 ステージにある３つのボタン「btn0」「btn1」「btn2」に対して マウスクリック時の処理を書こうとしている例文です。 もちろん、これではエラーになります。 for( var i:int; i<3; i++ ){ this["btn"+i].addEventListener( MouseEvent.MOUSE_DOWN,"on"+i ); function "on"+i( e:MouseEvent ):void{ trace( e.target.name ); } } こうした処理を実現したい場合、"on"+i 部分をどのように記述すると良いのでしょうか？ もしご存知でしたらお知恵をいただけないでしょうか。 よろしくお願い致します。
- ベストアンサー
- Flash
- arrayの中で、ループを使った採番など。
前回の続きになるのですが、下記の様に、arrayを複数にすると動かなくなります。 何が間違っているのでしょうか？ $url = array(); for($i = 1; $i <= 42; $i++) { $seminar = "http://www.hoge.com/seminar/".sprintf("%04d", $i).".html"; $url[] = $seminar; } $test = array( "http://www.hoge.com/seminar/0043_01.html" "http://www.hoge.com/seminar/0043_02.html" ); $array = array($url, $test); $myUrl = "http://www.hoge.com/seminar/0045.html"; if(in_array($myUrl, $array)){ echo "配列に".$myUrl."は存在します。"; } else { echo "配列に".$myUrl."は存在しません。"; }
- ベストアンサー
- PHP
- AS3の配列の中にアクセス
FlashCS3でas3を使っています。 配列についての質問なのですが、 下記のコードがあるとします。 var btn_arr:Array=[aboutA_mc,aboutB_mc,aboutC_mc,aboutD_mc]; 配列に格納したボタン全てに、同じマウスアクションをつけたい場合など、 for (var i:int = 0; i<btn_arr.length; i++) { btn_arr[i].addEventListener(MouseEvent.Roll_Over,abcdOver); } function abcdOver(e:MouseEvent):void { btn_arr[i].textColor = #FFFFF; とかで、出来るかなと思ったのですが、上手くいきません。 何か良い方法があれば、ご教授よろしくお願いいたします。
- ベストアンサー
- Flash
- AS3.0でボタン処理をまとめて書くには？
はじめまして。当方、最近プログラム的なものを始めたばかりで困っています。 例えばルートにbtn0,btn1,btn2という3つのムービークリップを置いたとして、 ボタンを押したらそれぞれのムービークリップ名をトレースするには、 AS2.0以前ではルートのフレームアクションで for (var i=0;i<3;i++){ _root.["btn" + i].onRelease = function{ trace(this._name); } } といった感じでforループでまとめられると思うのですが、 3.0ではどうしたらよいのか見当もつかず困っています。 for (var i=0; i<3; i++) { ["btn"+i]addEventListener(MouseEvent.CLICK,over); } このようにまとめてリスナーに登録したとしても、 リスナー関数が別になってしまうので、this.nameは使えず…はて。といったところです。 なにとぞご教示よろしくお願い申し上げます。
- ベストアンサー
- Flash
- JavaScriptのGPSについて
現在地の名前を入力し、GoogleMapで表示してその地図を保存するというものを作ったのですが 以下のコードで現在地を取得するとなぜかiPhoneでもAndroidでもバルセロナが表示されます なぜなのでしょうか？ 開発環境はMonacaです <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, user-scalable=no"> <script src="components/loader.js"></script> <link rel="stylesheet" href="components/loader.css"> <link rel="stylesheet" href="css/style.css"> <script> </script> </head> <body> <h1>ブックマークMAP</h1> <div id="new_div"> 店名：<input id="name_txt" type="text" value="" size="20" /><br /> <input id="save_btn" type="button" value="記録" /> </div> <div id="list_div">なし</div> <script> function $(id) { return document.getElementById(id); } //初期処理 var items = []; window.onload = function() { if (window.localStorage == undefined && navigator.geolocation == undefined) { alert("HTML5未対応端末です"); return; } //既存リスト表示 var list = localStorage.getItem("shoplist"); if (list == null) { list = ""; }else{ items = list.split("\n"); showItems(); } //記録ボタンを押したときの設定 $("save_btn").onclick = save_btn_clickHandler; }; //ブックマーク一覧の表示 function showItems() { var map_url = "http://maps.google.co.jp/maps?q="; var html = "<ul>"; for (var i in items) { var data = items[i].split("\n"); var name = data[0]; var lat = data[1] var lon = data[2] var link = "<a href='"+map_url+lat+","+lon+"'>"+name+"</a>"; html += "<li>"+link+"</li>"; } html += "</ul>"; $("list_div").innerHTML = html; } //保存ボタンを押したときの設定 function save_btn_clickHandler() { if ($("name_txt").value == "") { alert("場所を入力してください"); return; } //位置情報の取得 navigator.geolocation.getCurrentPosition( successCallback, errorCallback); $("save_btn").value = "現在地取得中" } //成功したとき function successCallback(position) { var lat = position.coords.latitude; var lon = position.coords.longitude; var name_txt = $("name_txt"); //場所+位置情報を保存 var item = name_txt.value + "/t" + lat + "/t" + lon; items.push(item); var list = items.join("\n"); try { localStorage.removeItem("shoplist"); localStorage.setItem("shoplist", list); } catch (err) { alert("保存失敗"); } $("save_btn").value = "記録"; name_txt.value = ""; showItems(); } //失敗したとき function errorCallback(err) { alert("失敗("+err.code+")"+err.message); $("save_btn").value = "記録"; } </script> </body> </html>
- ベストアンサー
- JavaScript