• 締切済み

ループ内のaddeventlistner

javascript初心者です、いろいろ検索したのですがわからず 教えてください。 サンプル <div id="hoge"></div> <script type=application/javascript> window.onload=function () { var html="検索エンジンのビッグ3" var big3= [ { "name":"google", "url":"http://google.com" }, { "name":"yahoo!", "url":"http://yahoo.com" }, { "name":"bing", "url":"http://bing.com" } ]; for (var i = 0, len = big3.length; i < len; i++) { html+= "<br />名前:"+big3[i].name+"<br />";  html+= "URL:"+big3[i].url+"<br />"; html+= '<input type="button" id="btn" value="投票" /><br />' }; document.getElementById("hoge").innerHTML=html; } </script> ----サンプルここまで このように配列をずらずらっと表示させてそれぞれのボタンを押すと、 その時の配列の情報を参照したいのです。 下のコードをボタンのすぐ下に置きましたが、cannot call method addEventListener of nullってエラーでできず、for文の外だと配列情報がとれず、基礎がわかっておらずすみませんが教えてください。 document.getElementById("btn").addEventListener('click',function(){alert("あなたがおしたのは"+big3[i].name)},false);

  • javab
  • お礼率33% (3/9)

みんなの回答

回答No.8

think49 さん、 ほそく、ありがとうございます。 >「Function#bind を使いましょー」 そそっ。 (document にぞくすまえに、いべんとをはりつけたから?) -- > 簡潔に書けたりします? う~ん、かんがえてたら、はたしてこれが「よいさんぷる」なのか?! (しつもんしゃを、おきざりにした感。ごめんなさい) <!DOCTYPE html> <html lang="ja"> <meta charset="utf-8" /> <title></title> <body>  <ol>   <li>a   <li>b   <li>c  </ol>    <script type="application/javascript; version=1.8"> var big3 =  [   { "name": "google", "url": "http://google.com" },   { "name": "yahoo!", "url": "http://yahoo.com" },   { "name": "bing", "url": "http://bing.com" }  ]; var LI =  document.querySelectorAll ('body > ol > li'); var func =  (function (e) alert (big3[this].name)); Array.forEach (LI,  (function (li, i)   (li.addEventListener ('click', func.bind (i), false)))); /* for (var i = 0, I = LI.length; i < I; i++)  LI[i].addEventListener ('click', func.bind (i), false); */ </script>

  • think49
  • ベストアンサー率59% (285/482)
回答No.7

jQuery ならこんな感じでしょうか。 http://jsfiddle.net/WVyAr/ バブリングを利用する方がスマートだと思いますが、それ以前にHTMLにもデータを置くなら配列ではなくDOMノードを参照する方がスマートって気がしないでもありません。 <span class="site-name"> のように参照しやすくするとかdata-*属性とかNode#setUserDataとか。 To: #4, 6 さん 横からですが、#4 さんのコードはクロスページリークするんじゃないでしょうか? http://msdn.microsoft.com/ja-jp/library/bb250448%28v=vs.85%29.aspx babu_baboo さんの指摘は「Function#bind を使いましょー」と読みましたが、よくよく調査してみると jQuery には Function#bind の代替がないっぽいです。(jQuery#bind は addEventListener のショートカットのようで) 今ケースでは jQuery.data() が使えそうですが、内部コードが頭を抱えたくなるコードなのでお勧めしがたかったり…。 http://api.jquery.com/jQuery.data/

回答No.6

jquery使うには、 javascriptが分かる必要がある。 ということですよね。。。 >だまって、bind つかいましょ (笑); ↑も、もしかしてもっと簡潔に書けたりします?(汗

回答No.5

> 楽して目的を果たす なのに、jQuery のしつもんがおおいのは、なぜ?() jQuery は、さっぱりなものですから・・・ だまって、bind つかいましょ (笑);

回答No.4

白熱してますね。すばらしい。 えーと私からは、楽して目的を果たす方法をご紹介します。 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でしか確認してないです。

回答No.3

len 推進派(?)の者です。 やっぱり、それひつようでしょ! (というか、へんすうにつかわれるなまえは、おおもじ派。) 文字列の連結は、配列にして一気に連結する派(?)。 バブリングするイベントは、document で監視する派(?)。 <!DOCTYPE html> <html lang="ja">  <head>   <meta charset="utf-8" />   <title>test</title>  </head>  <body>   <div id="hoge"></div>   <script type="text/javascript"> var big3 = [  { "name": "google", "url": "http://google.com" },  { "name": "yahoo!", "url": "http://yahoo.com" },  { "name": "bing", "url": "http://bing.com" } ]; var html = ["検索エンジンのビッグ3"]; for (var i = 0, I = big3.length; i < I; i++) {  html.push ('名前:' + big3[i].name);  html.push ('URL:' + big3[i].url);  html.push ('<input type="button" id="btn' + i + '" value="投票" />'); } document.getElementById ("hoge").innerHTML = html.join ('<br />'); function handler (event) {  var e = event.target || event.srcElement;  var n, c;    if ('INPUT' === e.nodeName)   if ('button' === e.type)    if ('投票' === e.value)     if (c = e.id.match (/^btn(\d+)$/))      alert (big3[ Number (c[1]) ].name); } document./*@if (1)  attachEvent ('on'+ @else@*/  addEventListener (/*@end@*/   'click', handler, false);   </script>  </body> </html> で、ほそくをみたら、Chrome13か~ addEventListenerには、おぶじぇくとをわたすことができるよ。 ついでに、いべんとはんどらーも、おぶじぇくとのなかに、かいちゃえ~! <!DOCTYPE html> <html lang="ja">  <head>   <meta charset="utf-8" />   <title>test</title>  </head>  <body>   <div id="hoge"></div>   <script type="text/javascript"> var Big3 = {  'member' :   [    { "name": "google", "url": "http://google.com" },    { "name": "yahoo!", "url": "http://yahoo.com" },    { "name": "bing", "url": "http://bing.com" }   ],  'handleEvent' :   (function (event) {    var e = event.target || event.srcElement;    var n, c;        if ('INPUT' === e.nodeName)     if ('button' === e.type)      if ('投票' === e.value)       if (c = e.id.match (/^btn(\d+)$/))        alert (this.member[ Number (c[1]) ].name);   }),      'demo' :   (function (target) {    var html = ["検索エンジンのビッグ3"];    var m = this.member;    var o;        for (var i = 0; o = m[i]; i++) {     html.push ('名前:' + o.name);     html.push ('URL:' + o.url);     html.push ('<input type="button" id="btn' + i + '" value="投票" />');    }    target.innerHTML = html.join ('<br />');    target.ownerDocument.addEventListener ('click', this, false);   }) }; Big3.demo (document.getElementById ('hoge'));   </script>  </body> </html> でもね、いいたかったのは、ほかにもある。 big3のられつは、あきらかにりすとこうぞうなのだから <br/>でこうせいされているのが、へん! すくりぷとが、うごかないかんきょうのひとがみても、URLとかなまえとかさいていげんみられるようにしておくべきだよ。 すくりぷとは、そのりすとこうぞうをかいせきしてうごかすべき。 onload も、すくりぷとをさいごにかくことによって、りようしない派、だった! document にいべんとをはりつけておけば、innerHTMLでよみこんだものがあろうがなかろうがかきかえられようが、うごけるし、documentは、すべてよみこみがおわらなくても、そんざいしているだろうし。

javab
質問者

お礼

回答ありがとうございます!! いつの間にやらいっぱい回答いただいてありがたいです。 初心者という免罪符が役に立たないことは重々承知してますが リスト構造もハブリング?も理解していないのでいただいたサンプル元に 調べてみます。 @とか出てくるととたんにわからなくなる。。

回答No.2

>> 下のコードをボタンのすぐ下に置きましたが ... ボタンのすぐ下に置いたというのは、もとのコードはこうだったのでしょうか? html+= "<br />名前:"+big3[i].name+"<br />"; html+= "URL:"+big3[i].url+"<br />"; html+= '<input type="button" id="btn" value="投票" /><br />' document.getElementById("btn").addEventListener('click',function(){alert("あなたがおしたのは"+big3[i].name)},false); }; "cannot call method addEventListener of null"というエラーの意味は、nullオブジェクトに対してaddEventListener()メソッドの呼び出しを行なったけど、nullオブジェクトはそのメソッドを持っていなかったので失敗したということです。 推測で申し訳ないですが、もし上記のようなコードであった場合、document.getElementById('btn')がnullを返すのでこのエラーが発生します。この段階ではまだボタンは生成されていない(DOMツリーに加えられていない)ので対象のボタンを見つけ出そうとしても見つからないからです。 処理の流れとしては、 1.ボタンを生成する 2.ボタンにイベントハンドラを登録する 3.ボタンをDOMツリーに加える という手順をふむ必要があります。2と3の順序は逆でもかまいません。 No1の方が示してくださっているコードを参考にいじってみると動作理解が深まるかと思います。

javab
質問者

お礼

ありがとうございます! ブラウザはChrome13です、お二方の回答を元に調べて 進めてみます。

  • LOHA
  • ベストアンサー率52% (203/388)
回答No.1

それっぽいサンプルを作ってみたので載せておきます。 #インデントは全角スペースになってますので注意 <!DOCTYPE html> <html lang="ja">  <head>   <meta charset="utf-8" />   <title>test</title>   <script type="text/javascript"> window.onload = function() {  var big3 = [   { "name": "google", "url": "http://google.com" },   { "name": "yahoo!", "url": "http://yahoo.com" },   { "name": "bing", "url": "http://bing.com" }  ];  // HTMLの生成  var html = "検索エンジンのビッグ3";  for (var i = 0; i < big3.length; i++) {   html += "<br />名前:" + big3[i].name + "<br />";   html += "URL:" + big3[i].url + "<br />";   html += '<input type="button" id="btn' + i + '" value="投票" /><br />';  };  document.getElementById("hoge").innerHTML = html;    // Eventの登録用クロージャ  var onClick = function(i) {   return function() { alert("あなたがおしたのは" + big3[i].name); }  }  // Eventの登録  for (var i = 0; i < big3.length; i++) {   var elem = document.getElementById("btn" + i);   if (elem.attachEvent) {    elem.attachEvent("onclick", onClick(i));   } else {    elem.addEventListener("click", onClick(i), false);   }  } }   </script>  </head>  <body>   <div id="hoge"></div>  </body> </html> 以下、何点か補足。 ■len? >for (var i = 0, len = big3.length; i < len; i++) { このlenは特に意味が無い気がします。 普通に for (var i = 0; i < big3.length; i++) { すればよいかと。 ■HTMLのid >html+= '<input type="button" id="btn" value="投票" /><br />' idの値はHTML内で一意でなくてはなりません。classを使う方がスマートな気がしますが、サンプルでは数値を付加することにしてみました。 http://www.tohoho-web.com/html/attr/id.htm ■ブラウザ固有の問題 >cannot call method addEventListener of nullってエラーでできず、 ブラウザとしてIEをお使いではないでしょうか? IE8以下ではイベントを登録するのにattachEventを使用する必要があります。 https://developer.mozilla.org/ja/DOM/element.addEventListener#Internet_Explorer http://journal.mycom.co.jp/news/2010/03/31/032/index.html この手のブラウザ固有の問題はたくさんありますので要注意です。 http://gihyo.jp/dev/serial/01/crossbrowser-javascript/0001 それと、 ><script type=application/javascript> についても、現状<script type="text/javascript">が無難かと思います。 http://ie-style.blogspot.com/2010/03/ie9-javascript-mime.html ■クロージャ 上記ソースではonClick(i)の部分に直接function(){alert("あなたがおしたのは"+big3[i].name)}と入れればいいじゃないかと思われるかもしれませんが、このiはfor文のiの参照です。よって、どのボタンのクリックイベントで呼ばれたときも、このケースではfor文終了時のi=3が参照されます。 それではまずいので、今回はクロージャを利用してみました。 #クロージャとは:http://dqn.sakusakutto.jp/2009/01/javascript.html 関数への引数としてプリミティブ型を渡した場合、値渡しになるので、それを利用しています。 型について:http://www.findxfine.com/index.php?p=228 クロージャの他にもinput要素のプロパティを利用する方法などもあるかと思います。 以上です。 少し難しい内容が入っていますが頑張ってください。

javab
質問者

お礼

ありがとうございます! ご紹介いただいたURLを参考にして作ってみます。 クロージャが全く理解できてませんので。。

関連するQ&A

  • なぜ、この場面で、ループ関数が必要なのでしょうか!

    プログラムレベルは下の下です。  以下のHPは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); ?>

  • 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が渡されてしまいます。 どうしたらよいのでしょうか?

  • 【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)になってしまいます。 traceで「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が難しいです。

    1 if (xhr.status === 200) { result.textContent = xhr.responseText; の部分がわからないのですが 自分で作った変数resultの中に通信に両方成功した場合サーバ側のPHPが生成したDOM要素を代入するという事をやっているのでしょうか? その結果、処理結果を表記するhtml<div id="result"></div>の中に、代入された中身が表記されるという事ですか? 2 下記の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生成という事ですか?

  • 【AS3】ループ処理で関数名を作成するには?

    ActionScript3.0についてご教授ください。 forなどを使い、ループ処理を使って変数名を作成する要領で 関数名を作ることは可能なのでしょうか? やりたい処理を記述させて頂きますと次の通りです。 ステージにある3つのボタン「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>