JSでのタグの削除方法について -以下のコードなのですが現在地を取得してリ-

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>

JSの保存ダイアログについて

以下のコードは簡易メモ的なものですそこに書き込まれた内容を保存できるようにしたいのですがfunction dl()には何を書けばいいのでしょうか？調べてみて function dl(C:\){ var a = document.createElement('a'); a.href = C:\; a.setAttribute('dl', name || 'noname'); a.dispatchEvent(new CustomEvent('click')); } としてみたのですがこれを書き込むと保存ダイアログはおろかtextの保存もできなくなってしまいます <input type="text" id="title"><br><br> <textarea id="memo" rows="8" cols="50"></textarea><br><br> <input type = "button" value="SAVE" onclick="dl();"> <script> var title = document.getElementById("title"); var memo = document.getElementById("memo"); window.onload = function() { var body_title = localStorage.getItem("title"); if (body_title != null) title.value = body_title; var body_memo = localStorage.getItem("memo"); if (body_memo != null) memo.value = body_memo; } title.onchange = function() { localStorage.setItem("title",title.value); } memo.onchange = function() { localStorage.setItem("memo",memo.value); } function dl(){ } </script>

JSのコードで保存ができません

以下のコードなのですがnameの部分だけ保存ができませんなぜなのでしょうか <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <meta name1="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, user-scalable=no"> <link rel="stylesheet" href="components/loader.css"> <script src="components/loader.js"></script> </head> <body> <table border="3" align="center" style=border-spacing:0px;> <tr> <th width="20" height="30">Day</th> <th width="80">name</th> <th width="70">in</th> <th width="100">out</th> <th width="100">total</th> </tr> <tr> <th><input type="text" id="day" style="width : 30px; height : 20px;"></th> <td><input type="text" id="name" style="width : 80px; height : 20px;"></td> <td><input type="text" id="in_m" style="width : 50px; height : 20px;"></td> <td><input type="text" id="out_m" style="width : 50px; height : 20px;"></td> <td><input type="text" id="total" style="width : 50px; height : 20px;"></td> </tr> </table> <script> //保存関係 var day = document.getElementById("day"); var name = document.getElementById("name"); var in_m = document.getElementById("in_m"); var out_m = document.getElementById("out_m"); var total = document.getElementById("total"); window.onload = function() { var body_day = localStorage.getItem("day"); var body_name = localStorage.getItem("name"); var body_in_m = localStorage.getItem("in_m"); var body_out_m = localStorage.getItem("out_m"); var body_total = localStorage.getItem("total"); if (body_day != null) day.value = body_day; if (body_name != null) name.value = body_name; if (body_in_m != null) in_m.value = body_in_m; if (body_out_m != null) out_m.value = body_out_m; if (body_total != null) total.value = body_total; } day.onchange = function() { localStorage.setItem("day",day.value); } name.onchange = function() { localStorage.setItem("name",name.value); } in_m.onchange = function() { localStorage.setItem("in_m",in_m.value); } out_m.onchange = function() { localStorage.setItem("out_m",out_m.value); } total.onchange = function() { localStorage.setItem("total",total.value); } </script> </body> </html>

JavaScriptについて

以下のコードはテキストボックスに文字を書き込み追加ボタンを押すとボタンのしたに書き込んだ内容が追加されるというものですなぜか追加ボタンを押しても反応がありませんなぜでしょうか？ <!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"> <link rel="stylesheet" href="components/loader.css"> <script src="components/loader.js"></script> </head> <body> <h1>ToDoメモ</h1>  <div id = "new_div"> <input id = "new_txt" type = "text" value = "" style = "width:250px" size = "40"/> <br /><input id = "add_btn" type = "button" value="追加" /> </div>  <div id = "items_div"></div>  <div id = "control_div"> <input id = "done_btn" type = "button" value = "削除"> </div> <script> function $(id) { return document.getElementById(id); } //変数の初期化 var todo_div = $(todo_div); var db; var cbItems = []; //ドキュメント読み込み時のイベント設定 window.onload = function() { if (window.openDatabase == undefined) { alert("Web Databaseに対応していません"); return } //データベースを開く db = window.openDatabase("todo.db", "1.0", "ToDo", 1024 * 1024); db.transaction(function(tr) { //テーブルがなければ作る var query = "CREATE TABLE IF NOT EXISTS todo_tbl(" + " todo_id INTEGER PRIMARY KEY, " + " memo TEXT NOT NULL " + ")"; tr.executeSql(query, [], loadItems); }); }; // アイテムの読み込み実行 function loadItems() { db.transaction(function(tr) { var query = "SELECT * FROM todo_tbl" ; 　　tr.executeSql(query, [] ,loadItems_onResult); }); } //アイテムが読み込まれたときのイベント function loadItems_onResult(tr, rs) { //すべての子ノードを削除 while(items_div.hasChildNodes()){ items_div.removeChild(items_div.lastChild); } cbItems = []; //チェックボックスの作成 for (var i = 0; i < rs.rows.length; i++) { var row = rs.rows.item(i); var todo_id = row.todo_id; var memo = row.memo; //チェックボックスの追加 var cb = document.createElement("input");//チェックを作成 cb.type = "checkbox"; cb.value = todo_id; cbItems.push(cb); var label = document.createElement("span");//ラベル作成 label.innerHTML = memo; var line = document.createElement("div");//一行作成 line.appendChild(cb); //チェックを追加 line.appendChild(label); //ラベルを追加 items_div.appendChild(line); //項目にlineを追加 } } //追加ボタンを押したときのイベント $("add_btn").onclick = function() { var text = $("new_txt").value; $("new_txt").value = ""; db.transaction(function(tr) { var query = "INSERT INTO todo_tbl(memo)VALUES(?)"; tr.executeSql(query,[text],loadItems); }); }; //削除を押した時のイベント $("done_btn").onclick = function() { db.transaction(function(tr) { for (var i in cbItems) { var cb = cbItems[i]; if(!cb.checked) continue; var query = "DELETE FROM todo_tbl WHERE todo_id=?"; tr.executeSql(query,[cb.value]); } },function(){ alert('削除失敗') },loadItems); }; </script> </body> </html>

jQueryが反映されません＞＜

jQueryとJavaScriptでToDoメモを作っています下記のコードなのですが削除ボタンが表示されないのとToDoリストがおかしな位置に来ますどうすればいいのでしょうか？ <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <link rel="stylesheet"type="text/css"href="css/style.css"> <script> monaca.viewport({width: 340}); 　　　　document.addEventListener("deviceready",onDeviceReady,false); function onDeviceReady() { document.addEventListener("backbutton", onBkbtn, false); } function onBkbtn() { location.href = "index.html"; } </script> </head> <body> <div data-role="page"> <div data-role="header"> <h1>CheckList</h1> </div> </center>  <center> <div id="new_div"> <input id="new_txt" type="text" value="" placeholder="ToDoを書き込んでください" style="width:270px" size="40"/> </center> <br> <div data-role="button" data-icon="plus" id="add_btn">追加</div> </div>  <div id="items_div"></div> <div id="control_div"> <div data-role="button" data-icon="delete" id="done_btn">削除</div> </div> </div>  <script src="gear5-0.3.js"></script> <script> //便利な関数の定義 function $(id) { return document.getElementById(id); } //変数の初期化 var todo_div = $("todo_div"); var db; var cbItems = [] ; //ドキュメント読み込み時のイベントを設定 window.onload = function() { if (window.openDatabase == undefined) { alert("WEB Databaseに対応していません！！") ; return } //データベースを開く db = window.openDatabase("todo.db", "1.0", "ToDo", 1024 * 1024); db.transaction(function(tr) { //テーブルがなければ作る var query = "CREATE TABLE IF NOT EXISTS todo_tbl(" + " todo_id INTEGER PRIMARY KEY, " + " memo TEXT NOT NULL " + ")"; tr.executeSql(query, [], loadItems); }); }; // アイテムの読み込み実行 function loadItems() { db.transaction(function(tr) { var query = "SELECT * FROM todo_tbl" ; 　　tr.executeSql(query, [] ,loadItems_onResult); }); } function loadItems_onResult(tr, rs) { //すべての子ノードを削除 while(items_div.hasChildNodes()){ items_div.removeChild(items_div.lastChild); } cbItems = []; //チェックボックスの作成 for (var i = 0; i < rs.rows.length; i++) { var row = rs.rows.item(i); var todo_id = row.todo_id; var memo = row.memo; //チェックボックスの追加 var cb = document.createElement("input"); cb.className = "large"; //CSSに対応させる cb.type = "checkbox"; cb.value = todo_id; cbItems.push(cb); var label = document.createElement("span"); label.innerHTML = memo; var line = document.createElement("div"); line.appendChild(cb); //チェックを追加 line.appendChild(label); //ラベルを追加 items_div.appendChild(line); //項目にlineを追加 } } //追加ボタンを押したときのイベント $("add_btn").onclick = function() { var text = $("new_txt").value; $("new_txt").value = ""; db.transaction(function(tr) { var query = "INSERT INTO todo_tbl(memo)VALUES(?)"; tr.executeSql(query,[text],loadItems); }); }; //削除を押した時のイベント $("done_btn").onclick = function() { db.transaction(function(tr) { for (var i in cbItems) { var cb = cbItems[i]; if(!cb.checked) continue; var query = "DELETE FROM todo_tbl WHERE todo_id=?"; tr.executeSql(query,[cb.value]); } },function(){ alert('削除失敗') },loadItems); }; </script> </body> </html>

タグで、submitさせる方法について

こんばんは。いつもお世話になります。 input type='submit'を、画像を使ってロールオーバーで実行したいのですが、うまくいきません。１）は、ＯＫです。２）と３）は、ダメでした。１）にある、name='delete_msg'　が重要な鍵ですが、それをJavaScriptでどう扱えば良いのかわかりません。３）の<div id='delete' ..... onclick='javascript:....'>Delete</div>で実行させる場合、 function pmDelete()にどう書けば良いのか教えてください。よろしくお願いします。 ------（例：ここから）----------------------------- <html><head> <script type='text/javascript'> function pmDelete(){ document.mSg.submit(); } </script> <style type='text/css'> div#delete { float: left; background-image: url(page_up.gif); text-indent: -1000em; overflow: hidden; cursor: pointer; } div#delete:active { background-position: 0 -20px; } </style> </head> <body> <form name='mSg' id='mSg' action='index.php' method='post'> <input type='checkbox' id='msg_id[]' name='msg_id[]' value='10' />111<br /> <input type='checkbox' id='msg_id[]' name='msg_id[]' value='10' />222<br /> <input type='checkbox' id='msg_id[]' name='msg_id[]' value='10' />333<br /> １）<input type='submit' name='delete_msg' value='Delete' /><br /> ２）<input type='submit' value='Delete' /><br /> ３）<div id='delete' name='delete' onclick='javascript:pmDelete();'>Delete</div> </form></body></html> ------（例：ここまで）-----------------------------

jQueryのclickイベントハンドラ

最近jQueryを勉強中でして、練習の意味で自分で以下のようなページを作ってみました。【ページの内容】犬、猫、鳥の画像ボタンを配置して、クリックすると各ボタンのalt属性をアラート表示する【実際のhtml】 <div class="header"> <ul class="menu"> <li><a href="index.html" id="btn1"><img src="dog.png" alt="Dog"></a></li> <li><a href="index.html" id="btn2"><img src="cat.png" alt="Cat"></a></li> <li><a href="index.html" id="btn3"><img src="bird.png" alt="Bird"></a></li> </ul> </div> 【実際のscript】 $(function(){ var btn1 = $('#btn1'); var photo1 = btn1.find('img'); var name1 = photo1.attr('alt'); btn1.click(function(){ alert(name1); }); var btn2 = $('#btn2'); var photo2 = btn2.find('img'); var name2 = photo2.attr('alt'); btn2.click(function(){ alert(name2); }); var btn3 = $('#btn3'); var photo3 = btn3.find('img'); var name3 = photo3.attr('alt'); btn3.click(function(){ alert(name3); }); }); 上記で一応やりたいことは再現はできるのですが、scriptが冗長なのでもっと短くしたいです。しかしどんなスクリプトにすればよいかわかりません。宜しければアドバイスお願いいたします。

JavaScriptでのcheckbox作成

JavaScriptのcheckbox作成について教えてください突然のリクエスト申し訳ございませんお時間があればご回答お願いします ToDoメモを作っておりまして、仕様としては input type="text"に文字を書き込んで追加ボタンを押せばtextboxの下に書き込まれた内容がリストのような形で表示されますそのリストの横にチェックボックスをつけてチェックして削除ボタンを押すと削除できるという仕組みですですがチェックボックスのサイズが小さいですどうすればサイズを大きくできるのでしょうか？ JavaScriptでcheckboxを作成するコードは下記の通りです <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,user-scalable=yes,initial-scale=1.0,maximum-scale=3.0"> <script src="plugins/plugin-loader.js"></script> <link rel="stylesheet" href="plugins/plugin-loader.css"> <script> // Set virtual screen width size to 320 pixels monaca.viewport({width: 320}); // // TODO: Please edit your JavaScript code here // </script> <style> h1 { color : #4795F4; } </style> </head> <body background="img/st18.png"> <center><h1>ToDoメモ</h1> <a href="index.html"><img src="img/blhome.gif" width="50" height="25"></a> </center>  <center><div id="new_div"> <input id="new_txt" type="text" value="" style="width:270px" size="40"/></center> <br><img src="img/blmenu.gif" width="50" height="25" id="add_btn" /> </div>  <div id="items_div"></div>  <div id="control_div"> <img src="img/blmenu.gif" width="50" height="25" id="done_btn"/> </div>  <script src="gear5-0.3.js"></script> <script> //便利な関数の定義 function $(id) { return document.getElementById(id); } //変数の初期化 var todo_div = $("todo_div"); var db; var cbItems = [] ; //ドキュメント読み込み時のイベントを設定 window.onload = function() { if (window.openDatabase == undefined) { alert("WEB Databaseに対応していません！！") ; return } //データベースを開く db = window.openDatabase("todo.db", "1.0", "ToDo", 1024 * 1024); db.transaction(function(tr) { //テーブルがなければ作る var query = "CREATE TABLE IF NOT EXISTS todo_tbl(" + " todo_id INTEGER PRIMARY KEY, " + " memo TEXT NOT NULL " + ")"; tr.executeSql(query, [], loadItems); }); }; // アイテムの読み込み実行 function loadItems() { db.transaction(function(tr) { var query = "SELECT * FROM todo_tbl" ; 　　tr.executeSql(query, [] ,loadItems_onResult); }); } //アイテムが読み込まれたときのイベント function loadItems_onResult(tr, rs) { //すべての子ノードを削除 while(items_div.hasChildNodes()){ items_div.removeChild(items_div.lastChild); } cbItems = []; //チェックボックスの作成 for (var i = 0; i < rs.rows.length; i++) { var row = rs.rows.item(i); var todo_id = row.todo_id; var memo = row.memo; //チェックボックスの追加 var cb = document.createElement("input");//チェックを作成 cb.type = "checkbox"; cb.value = todo_id; cbItems.push(cb); var label = document.createElement("span");//ラベル作成 label.innerHTML = memo; var line = document.createElement("div");//一行作成 line.appendChild(cb); //チェックを追加 line.appendChild(label); //ラベルを追加 items_div.appendChild(line); //項目にlineを追加 } } //追加ボタンを押したときのイベント $("add_btn").onclick = function() { var text = $("new_txt").value; $("new_txt").value = ""; db.transaction(function(tr) { var query = "INSERT INTO todo_tbl(memo)VALUES(?)"; tr.executeSql(query,[text],loadItems); }); }; //削除を押した時のイベント $("done_btn").onclick = function() { db.transaction(function(tr) { for (var i in cbItems) { var cb = cbItems[i]; if(!cb.checked) continue; var query = "DELETE FROM todo_tbl WHERE todo_id=?"; tr.executeSql(query,[cb.value]); } },function(){ alert('削除失敗') },loadItems); }; </script> </body> </html>

JavaScript　オンマウスで画像切り替え、テキスト切り替え

javascriptで困っています。あるテキストに一回のオンマウスで、 idを持った箇所の画像を切り替え、また別のidをもった箇所にテキストを表示させたいのですがうまくいきません。今までのコードはこちらです。 script -------------- function swap(n) { var items = [ { TextA:"あああ", ImageB:"../../common/logo.gif"}, { TextA:"２２２", ImageB:"../../common/logo.gif"}, { TextA:"３３３", ImageB:"../../common/logo.gif"} ]; var o = document.getElementById("Main"); $("Txt").innerText = items[n].TextA; $("Photo").src = items[n].ImageB; } html ---------- <div id="Main"> <img src="../logo.gif" alt="" name="Photo" width="120" height="60" id="Photo"> <div id="Txt" name="Txt">最初</div> </div> <A href="#" onmouseover="swap(0)">１</A><br> <A href="#" onmouseover="swap(1)">２</A><br> <A href="#" onmouseover="swap(2)">３</A> 詳しい方、どうぞご教授よろしくお願い致します。

localStorageでのcheckbox制御

下記サイトを参考に、テキストボックスとチェックボックスをlocalStorageに保存するプログラムを作ってみました。 http://jsdo.it/twi_masa/hx8D 質問ですが、チェックやテキストを書いて保存ボタンを押すとlocalStorageに値が保存されることはchromeのデベロッパーツールで確認しました。値がある状態でロードを押すとその保存された状態に復元されますが、それをロードボタンを押さずにページが読み込まれた直後に表示させる方法が知りたいです。 window.onload = function(){ 処理 } だと思い、 load : functionをwindow.onload = functionへ単純に変更しましたが、それでは保存もロード出来なくなってしまいました。自分では全く書けないので、出来ましたらソースを書いていただけるとありがたいです。よろしくお願いします。 <table> <tr> <td>テキスト</td> <td><input type="text" id="text1" /></td> </tr> <tr> <td>チェックボックス</td> <td> <input type="checkbox" id="checkbox1" value="0">チェック1 <input type="checkbox" id="checkbox2" value="0">チェック2 </td> </tr> </table> <input type="button" value="保存" onclick="hx8D.save();"> <input type="button" value="ロード" onclick="hx8D.load();" /> <script> var hx8D = function(){ var HX8D = function(){}; HX8D.prototype = { save : function(){ var elements = document.getElementsByTagName("input"); for(var i=0; i<elements.length; i++){ var type = elements[i].type; var key = elements[i].id; if(type == "text"){ localStorage[key] = elements[i].value; }else if(type == "checkbox"){ localStorage[key] = elements[i].checked; } } }, load : function(){ var elements = document.getElementsByTagName("input"); for(var i=0; i<elements.length; i++){ var type = elements[i].type; var key = elements[i].id; if(type == "text"){ elements[i].value = localStorage[key]; }else if(type == "checkbox"){ elements[i].checked = localStorage[key] == "true" ? true : false; } } }, }; return new HX8D(); }(); </script>

JavaScriptで得た値を別ページに反映

JavaScriptで得た値を別ページに反映させたいと思っています。同一ページでは上手くいきますが、別ページへの反映ができません。教えてください、宜しくお願いします。同一ページのサンプル <html> <head> <title>aa</title> <Script LANGUAGE='JavaScript'>  </Script> </head> <body> <form name='form1' action=''> <div id='label1'>ここに表示</div> <input type='text' name='txt' value=''> <input type='button' name='btn' value='ボタン' onClick='fncDisp()'> </form> </body> </html>

if構文

初心者でif構文がよくわからず質問させてください。下記のようなボタンをつくり、 <form action="#"> <input type="button" value="うさぎ" id="txt" onclick="aGetElementById()" /> <input type="button" value="とり" id="txt" onclick=b"GetElementById()" /> </form> ボタンをクリックして、 <div><span id="box"></span>が大好きです。</div> のspanの中にvalue名（うさぎ・とり）を表示させ、『「value名」が大好きです。』と表示させたいのです。 Javascriptを下記のように書いてみたのですが、テキスト表示の切り替えがうまくいきません。 <script>  </script> どうかおしえてください。よろしくお願いします。

Google Mapsからxmlファイルの読み込み

お世話になっております。質問はタイトルの通りです。javascriptのソースを以下のようになります。ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー var map; function initialize() { if (GBrowserIsCompatible()) { map = new GMap2(document.getElementById("map_canvas")); map.setCenter(new GLatLng(34.5927356,135.50753655), 5); GEvent.addListener(map, "click", clickAction); } } function downloadData(){ GDownloadUrl("http://○○/yahoolocaltest2.php", function dispData(data, statusCode){ var xml = GXml.parse(data); var markers = xml.documentElement.getElementsByTagName("marker"); for (var i = 0; i < markers.length; i++) { var lats = markers[i].getElementsByTagName("lat"); var lngs = markers[i].getElementsByTagName("lng"); var names = markers[i].getElementsByTagName("name"); var lat = parseFloat(GXml.value(lats[0])); var lng = parseFloat(GXml.value(lngs[0])); var name = GXml.value(names[0]); map.addOverlay(createMarker(lat, lng, name)); } }); } function createMarker(lat, lng, name) { var marker = new GMarker(new GLatLng(lat, lng)); var html = "<p>" + name + "</p>"; GEvent.addListener(marker, "click", function(){ marker.openInfoWindowHtml(html); }); return marker; } ーーーーーーーーーーーーーーーーーーーーーーーーーーーーー動けない所： function downloadData()の所には”yahoolocaltest2.php”というファイルを読み込みたいですが、マーカがでないです。 xmlデータは”~~.php”なんですが、実行結果は以下のようなxmlデータに整いました。 <?xml version='1.0' encoding='UTF-8' ?> <markers> <marker> <lat>35.2570706</lat> <lng>140.3977072</lng> <name>千葉県いすみ市</name> </marker> <marker> <lat>35.6766300</lat> <lng>139.7425472</lng> <name>東京都千代田区</name> </marker> <marker> <lat>35.6785042</lat> <lng>139.7415028</lng> <name>東京都千代田区</name> </marker> </markers> この結果は"~~.xml"という名前の保存したら、表示できますが。”~~.php”の形式なら表示できないです。全くの新人なんですが、ご指導をお待ちしております。ありがとうございます。

セレクトメニューに応じたdivタグの内容

javascriptの質問です。フォーム内のセレクトメニューに応じて表示する配列を選び、複数のdivタグ内に表示したいと思っています。getElementByIdでセレクトメニューにIdをつけて呼び出し、selectedIndexでfunction()をonloadという事ですすめています。複数のdivタグ内に書き出すのにinnerHTMLを使うんだなというところまでは理解しているつもりですが、上手く動きませんので、どなたかご存知の方にご教授願えればと思います。 <html> <head> <script type="text/javascript"> window.onLoad = function(){ document.getElementById("selected").onChange = function(){ var planTitle = this.selectedIndex; var object = document.getElementById("derection"); var TextData = [[],["text","text"],["text","text"]]; for (var i=0; i<TextData[planTitle].length; i++){ document.write(TextData[i]); } } } </script> </head> <body> <form action=""> <select id="selected"> <option value="title01">title01</option> <option value="title02">title02</option> <option value="title03">title03</option> </select> <div id="direction"></div> <div id="direction"></div> </form> </body> </html>

jsでプルダウンで選択したものがうまく表示されない

以下のhtml文があります。 <!DOCTYPE html> <html> <head> <title></title> <script language="javascript" type="text/javascript"> function onButtonClick() { var val = document.forms.form1.textBox1.value; var target = document.getElementById("output"); if (val == "Penguin") { target.innerHTML = "合っています。"; } else { target.innerHTML = "間違っています。"; } } </script> </head> <body> <form action="" id="form1"> <div>"Penguin"と入力してください。</div> <input id="textBox1" type="text" value="" /> <input type="button" value="Exec" onclick="onButtonClick();" /> </form> <div id="output"></div> </body> </html> Penguinと入力すると合っていますと表示が出ます。これを、プルダウン方式にしました。 <!DOCTYPE html> <html> <head> <title></title> <script language="javascript" type="text/javascript"> function selectboxChange() { var val1 = document.forms.form1.Select1.value1; var target = document.getElementById("output"); if (val1 == "要素1") { target.innerHTML = "合っています。"; } else { target.innerHTML = "間違っています。"; } } </script> </head> <body> <form name="form1" action=""> <select id="Select1" onchange="selectboxChange();"> <option>---</option> <option value1 == "要素1">要素1</option> <option>要素2</option> <option>要素3</option> <option>要素4</option> <option>要素5</option> </select> </form> <div id="output"></div> </body> </body> </html> これにすれば、要素１を選択すれば、会っていますと表示されるのですが、されません。どうしたら改善されますか。

ドラッグできるエレメントを複数作成

フォームのテキスト入力枠から入力した文字を div要素の中に入れて、そのdiv要素をドラッグできるようにしたいのです。ドラッグ要素の作成にはAjaxライブラリの「bytefx_OS.js」を使っています。今下記のようにソースを書いています。＝＝＝＝＝＝＝＝＝＝＝＝＝ var txtnum = 0; function apptxt() { var uptxt1 = document.forms["txtup"].txt1.value; var newDiv = document.createElement("div"); newDiv.position = "relative"; newDiv.style.color = "#000000" ; newDiv.style.fontSize = 12; newDiv.style.cursor = "move" ; newDiv.id = "txt" + txtnum ; newDiv.innerHTML = uptxt1 ; document.getElementById("txtbox").appendChild(newDiv) ; bytefx.drag(document.getElementById("txt" + txtnum)); document.forms["txtup"].txt1.value = ""; txtnum = ++txtnum ; } ----- <div id="txtbox"> <form name="txtup"> <input type="text" name="txt1" size="40"> <input type="button" name="txt" value="文字を入力する" onclick="apptxt();"> </form> </div> ＝＝＝＝＝＝＝＝＝＝＝＝＝これだと、１回目に入力してできた div要素はドラッグできるのですが２回目以降にできるdiv要素のドラッグができません。（div要素だけは作成されるのですが）どうすれば２回目以降のdiv要素もドラッグができるようになるのか分かる方がいたらお教えください。お願いします。

動的なセレクトボックスの生成と削除

CGI（Perl）で、Javascriptを用いWEBアプリケーションを作成しています。その過程で、追加ボタンを押すとセレクトボックス（５つでひとかたまりです）が増えるJavascriptを作成しています。しかし、残念ながら削除をする機能をどうしていいか思いつきませんのでお知恵を貸してください。（また、増加ボタンも他にいい方があレバよろしくお願いします。）今までに作成したのは以下のとおりです。 **********Javascript*********** var copy; function addInput() { copy = document.getElementById('plus') copy.innerHTML="Filter:          <select name='condition'> <option value='and'>AND</option> <option value='or'>OR</option> </select>  <select onchange='SetSubMenu(value);'> <option value='Werkstoff'>1.Werkstoff</option> <option value='Shiftfaktor'>2.Shiftfaktor </option> <option value='SurfCorr'>3.SurfCorr</option> </select>  <select name='condition'> <option value='like'>like</option> <option value='notlike'>not like</option> <option value='equal'>=</option> <option value='<'><</option> <option value='>'>></option> <option value='<='><=</option> <option value='>='>>=</option> </select>  <div id ='Werkstoff' class='secondpulldown'> <select><TMPL_LOOP NAME=EINTRAGWERK> <option value='<TMPL_VAR NAME=WERKSTOFF>'><TMPL_VAR NAME=WERKSTOFF></option></TMPL_LOOP></select></div> <div id ='Getriebe' class='secondpulldown'> <select><TMPL_LOOP NAME=EINTRAGETRIEBE> <option value='<TMPL_VAR NAME=GETRIEBE>'><TMPL_VAR NAME=GETRIEBE></option></TMPL_LOOP></select></div>   <input type='button' onclick='addInput()' value='+'>  <input type='button' onclick='delInput()' value='-'> <div id='plus'></div>" } </script> **********stylesheet************* <style type="text/css"></style> <table> <tr> <td>Datenbank:</td> <td colspan="5"> <select name="datenbank"> <option value="bank1">DATEN BANK 1</option> </select> </td> </tr> <tr> <td>Filter:</td> <td> <select name="condition"> <option value="and">AND</option><option value="or">OR</option> </select> </td> <td> <select onchange="SetSubMenu(value);"> <option value="Werkstoff">1.Werkstoff</option> <option value="Shiftfaktor">2.Shiftfaktor </option> <option value="SurfCorr">3.SurfCorr</option> </select> </td> <td> <select name="condition"> <option value="like">like</option> <option value="notlike">not like</option> <option value="equal">=</option> <option value="<"><</option> <option value=">">></option> <option value="<="><=</option> <option value=">=">>=</option> </select> </td> <td> <div id ="Werkstoff" class="secondpulldown"> <select> <TMPL_LOOP NAME=EINTRAGWERK><option value="<TMPL_VAR NAME=WERKSTOFF>"><TMPL_VAR NAME=WERKSTOFF></option></TMPL_LOOP> </select> </div> <div id ="Getriebe" class="secondpulldown"> <select> <TMPL_LOOP NAME=EINTRAGETRIEBE><option value="<TMPL_VAR NAME=GETRIEBE>"><TMPL_VAR NAME=GETRIEBE></option></TMPL_LOOP> </select> </div> </td> <td> <input type="button" onclick="addInput()" value="+"> <input type="button" onclick="delInput()" value="-"> </td> </tr> <tr> <td colspan='6'><div id="plus"></div></td> </tr> </table> よろしくお願いします。

firebugエラー解消方法

下記を実行すると、fireburgのデバッグで2つのエラーが出ます。解消方法お分かりになる方いらっしゃいますでしょうか。 ■エラー内容　　　SyntaxError: missing } after function body　　　　　　　function doNothing() { } 　　　------------------↑ ■エラー内容　　ReferenceError: searchLocations is not defined　　　　　　　　　　<html xmlns="http://www.w3.org/1999/xhtml"> ●ソース <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <title>Google Maps AJAX + mySQL/PHP Example</title> <script src="http://maps.googleapis.com/maps/api/js?sensor=false" type="text/javascript"></script> <script type="text/javascript"> //<![CDATA[ var markers = []; var locationSelect; var sidebarList; function searchLocations() { var address = document.getElementById("addressInput").value; var geocoder = new google.maps.Geocoder(); geocoder.geocode({address: address}, function(results, status) { if (status == google.maps.GeocoderStatus.OK) { searchLocationsNear(results[0].geometry.location); } else { alert(address + ' not found'); } }); } function searchLocationsNear(center) { var category = document.getElementById('categorySelect').value; var radius = document.getElementById('radiusSelect').value; var searchUrl = 'phpsqlsearch_genxml.php?lat=' + center.lat() + '&lng=' + center.lng() + '&radius=' + radius + '&category=' + category; downloadUrl(searchUrl, function(data) { var xml = parseXml(data); var markerNodes = xml.documentElement.getElementsByTagName("marker"); for (var i = 0; i < markerNodes.length; i++) { var name = markerNodes[i].getAttribute("name"); var address = markerNodes[i].getAttribute("address"); var hpurl = markerNodes[i].getAttribute("hpurl"); var ifrurl = markerNodes[i].getAttribute("ifrurl"); var distance = parseFloat(markerNodes[i].getAttribute("distance")); var latlng = new google.maps.LatLng( parseFloat(markerNodes[i].getAttribute("lat")), parseFloat(markerNodes[i].getAttribute("lng"))); sidebarList += '<a href="javascript:myclick('+ i +')">'+ name +'</a><br />'; //追加 } document.getElementById("side_bar").innerHTML = sidebarList; //追加 function downloadUrl(url, callback) { var request = window.ActiveXObject ? new ActiveXObject('Microsoft.XMLHTTP') : new XMLHttpRequest; request.onreadystatechange = function() { if (request.readyState == 4) { request.onreadystatechange = doNothing; callback(request.responseText, request.status); } }; request.open('GET', url, true); request.send(null); } function parseXml(str) { if (window.ActiveXObject) { var doc = new ActiveXObject('Microsoft.XMLDOM'); doc.loadXML(str); return doc; } else if (window.DOMParser) { return (new DOMParser).parseFromString(str, 'text/xml'); } } function doNothing() { } </script> </head> <body style="margin:0px; padding:0px;" > //onload="load()" はずした <div> <select id="categorySelect"> <option value="" selected>選択なし</option> <option value="食事" selected>食事</option> <option value="病院">病院</option> <option value="小売店">小売店</option> </select> <input type="text" id="addressInput" size="40" value="住所を入力して下さい。" /> <select id="radiusSelect"> <option value="0.5" selected>0.5km</option> <option value="1">1km</option> <option value="20">20km</option> </select> <input type="button" onclick="searchLocations()" value="検索"/> </div> <div><select id="locationSelect" style="width:35%;visibility:visible"></select></div> <div id="side_bar" style="border: : solid 1px #808080; ></div> </body> </html>

フォームでのタグについて

検索フォームに　IDを入力して　ブログを表示するようなURLでリンクしたいと考えています。 <form method="get" action="http://blog.goo.ne.jp/" class="search" target="_blank"> <div> <input type="text" name="ID" class="textBox"><input type="hidden" value="/"> <input type="submit" value="検索" class="btn"> </div> </form> 上のようなhtmlタグを作りましたが　うまく http://blog.goo.ne.jp/synchro-night/ http://blog.goo.ne.jp/(IDをフォームで入力)/ のようなリンクができません。どのように変えればよいのでしょうか？ JavaScriptで　する必要があるのでしょうか？

[jQuery]イベント定義時のコールバック関数に引数を渡したい

■以下のHTMLが1～5の５個あるとします。 <select id="test_list1"> <option value="1">あいうえお</option> <option value="2">かきくけこ</option> </select> <div id="test_txt1"></div> ■jqueryで以下のように、セレクトボックスを変更したら、それに紐づくdivタグのテキストを書き換えるとします。 var test = 5; for (i=1; i <= test; i++) { $("#test_list"+ i).change( function() { $("#test_txt"+ i ).text('変更されました。'); }); } change()イベント時は、iの値が正常なんですが、 text()で書き換え時は、iの値が常に5になってしまいます。 text()で書き換え時のiは、イベント定義時のiではないということは分かるのですが、解決の方法がわかりません。こんなふうに引数として渡すことはできないのでしょうか？ $("#test_list"+ i).change( function( i ) { $("#test_txt"+ i ).text('変更されました。'); }); ご教示願います。。

JSでのタグの削除方法について

みんなの回答

補足 2014/08/08 16:41

関連するQ&A

JavaScriptのGPSについて

JSの保存ダイアログについて

JSのコードで保存ができません

JavaScriptについて

jQueryが反映されません＞＜

タグで、submitさせる方法について

jQueryのclickイベントハンドラ

JavaScriptでのcheckbox作成

JavaScript　オンマウスで画像切り替え、テキスト切り替え

localStorageでのcheckbox制御

JavaScriptで得た値を別ページに反映

if構文

Google Mapsからxmlファイルの読み込み

セレクトメニューに応じたdivタグの内容

jsでプルダウンで選択したものがうまく表示されない

ドラッグできるエレメントを複数作成

動的なセレクトボックスの生成と削除

firebugエラー解消方法

フォームでのタグについて

[jQuery]イベント定義時のコールバック関数に引数を渡したい

注目のQ&A

カテゴリ
一覧

専門家に質問してみよう
専門家登録

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

JSでのタグの削除方法について

みんなの回答

補足 2014/08/08 16:41

関連するQ&A

JavaScriptのGPSについて

JSの保存ダイアログについて

JSのコードで保存ができません

JavaScriptについて

jQueryが反映されません＞＜

タグで、submitさせる方法について

jQueryのclickイベントハンドラ

JavaScriptでのcheckbox作成

JavaScript オンマウスで画像切り替え、テキスト切り替え

localStorageでのcheckbox制御

JavaScriptで得た値を別ページに反映

if構文

Google Mapsからxmlファイルの読み込み

セレクトメニューに応じたdivタグの内容

jsでプルダウンで選択したものがうまく表示されない

ドラッグできるエレメントを複数作成

動的なセレクトボックスの生成と削除

firebugエラー解消方法

フォームでのタグについて

[jQuery]イベント定義時のコールバック関数に引数を渡したい

注目のQ&A

カテゴリ 一覧

専門家に質問してみよう 専門家登録

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

JavaScript　オンマウスで画像切り替え、テキスト切り替え

カテゴリ
一覧

専門家に質問してみよう
専門家登録