以下のコードなのですが現在地を取得してリスト化して保存するというものです
追加された<a>の横に削除ボタン(del_btn)を設置し、押されたらリストを削除をいう風にしたいのですが
どうしてもできません
コードの下部の
//削除ボタンが押されたとき
の部分の正しい記述がわかりません
ご教授お願いします
<!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">
</head>
<body bgcolor="#C2F2A5">
<center>
<font face="HG創英角ポップ体">
<h1>ブックマークMAP</h1>
</center>
<div id="new_div">
<span id="name">場所:<input id="name_txt" type="text" value="" size="20" /><br /></span>
</font>
<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;
$("del_btn").onclick = del_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("\t");
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+"<input id='del_btn' type='button' value='削除'>"+"</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 = "記録";
}
//削除ボタンが押されたとき
function del_btn_clickHandler(){
delete "<'a'>";
}
</script>
</body>
</html>
A 回答 (1件)
- 最新から表示
- 回答順に表示
No.1
- 回答日時:
ざっと見ただけなので、全体をちゃんと把握してませんが…
>html += "<li>"+link+"<input id='del_btn' type='button' value='削除'>"+"</li>";
だと id="del_btn" の要素が複数生成されてしまいますが、HTML文法違反になります。
class設定などを利用するか、個別にイベントを設定するかなどにしてください。
その結果、
>$("del_btn").onclick = del_btn_clickHandler;
のイベント設定も不適切になっています。
(save_btnのほうは一つでしょうから、このままでOKです)
削除の処理に関しては、クリックされた要素の親要素(LI要素)を削除するという内容にしておけば宜しいかと思います。
個別にイベントを設定する場合、onclickなどだとイベントハンドラにイベントオブジェクトが渡されないブラウザがありますので、
onclick="del_btn_clickHandler(this)"
onclick="del_btn_clickHandler(event)"
などとしてハンドラ側で引数として取得できるようにしておくのがよさそうです。
addEventListnerなどを用いて設定すれば、第一引数にイベントオブジェクトが渡されます。
function del_btn_clickHandler(elm){
//elmにクリック時の要素が渡されると仮定すると
while(elm && elm.nodeName != "LI") elm = elm.parentNode;
if(elm) elm.parentNode.removeChild(elm);
}
のような要領で、ご希望の動作になると思います。
この回答への補足
>id="delbtn"
→class="del_btn"
>$("del_btn").onclick = del_btn_clickHandler;
→onclick="del_btn_clickHandler(this)"
onclick="del_btn_clickHandler(event)"
に変更して残りの部分を書き加えるということでよろしいでしょうか?
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・人生のプチ美学を教えてください!!
- ・10秒目をつむったら…
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・【大喜利】【投稿~9/18】 おとぎ話『桃太郎』の知られざるエピソード
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
追加ボタンを押した際に ok ボ...
-
GASでチェックボックスを一括of...
-
特定の文字列を複数抜き出した...
-
jsonテキストデータの並び替え...
-
jQueryで同じクラス名のものを...
-
鍵盤アプリで、スマホの画面に...
-
jQueryでシンセサイザーを作っ...
-
HTMLでサブフレームから親のス...
-
ボタンを押したあとに画像を表...
-
disabled プロパティが表示され...
-
初心者です。gulpでコンパイル...
-
食材の期限を管理するためにGAS...
-
ビデオのJSについて
-
プログラミング 学習
-
ジャバスクリプトについて。
-
Colorboxがうまく設置できません
-
jsで質問です。 ボタンが二つ存...
-
前回の質問の続き function mov...
-
このプログラムに、王手をかけ...
-
前回の質問の続き function mou...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
食材の期限を管理するためにGAS...
-
ビデオのJSについて
-
前回の質問の続き function mov...
-
このプログラムに、王手をかけ...
-
このプログラムに王様の逃げ道...
-
初心者です。gulpでコンパイル...
-
前回の質問の続き function mou...
-
鍵盤アプリで、スマホの画面に...
-
スマホ上で、左右スワイプで次...
-
jQueryで同じクラス名のものを...
-
読み込んだQRコードをフォーム...
-
追加ボタンを押した際に ok ボ...
-
Colorboxがうまく設置できません
-
階層別の組織図の自動作成について
-
二次元配列を使って順位をだす...
-
【GAS】WEBアプリでハイパーリ...
-
HTMLで作った時報アプリが動き...
-
セレクトを全て選択されていな...
-
画面遷移を行わずに同一ページ...
-
jsで質問です。 ボタンが二つ存...
おすすめ情報