jQueryが反映されない！削除ボタンが表示されず、ToDoリストがおかしな位置に…どうする？

前へ 次へ
このQ&Aのポイント
  • jQueryとJavaScriptを使用してToDoメモを作成していますが、jQueryが反映されず、削除ボタンが表示されない問題が発生しています。
  • また、ToDoリストがおかしな位置に表示されています。これらの問題を解決する方法を教えてください。
  • 問題の解決には、jQueryとJavaScriptのコードを修正する必要があります。削除ボタンが表示されない問題は、ボタンの要素を正しく設定することで解決することができます。そして、ToDoリストの表示位置の問題は、CSSのスタイルを調整することで解決することができます。
回答を見る
  • ベストアンサー

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> <!--Android1.6対策--> <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>

質問者が選んだベストアンサー

  • ベストアンサー
  • Gotthold
  • ベストアンサー率47% (396/832)
回答No.2

> jQueryとJavaScriptでToDoメモを作っています そもそもこのコードでjQueryは全く使ってないと思うけど なんでjQueryを使っていると思い込んでいるの？ > <link rel="stylesheet"type="text/css"href="css/style.css"> type の前と hrefの前にスペースが無い。 > </center> > <!--新規追加ボックス--> 開始タグが無いのに終了タグが出現している。 そもそもHTML5ではcenter使えない。 > このままコピペで使っていただけたらお分かりになると思いますが Google Chromeでコピペしてやってみたけど、 ・monacaの所は未定義なのでエラー ・css/style.cssは無いので読めない ・gear5-0.3.jsは無いので読めない という状況下で、そんなに変な動作はしてないように見えた。 （削除ボタンはチェックを入れた項目を削除するんだよね？） 具体的に何がおかしいの？ ここに載せてないcss/style.cssが悪いと言うことは無いの？ そういえば、どのブラウザで動作確認してるの？

DreamyLife_615
質問者

お礼

自解しました

DreamyLife_615
質問者

補足

いろいろと変な文章ですみません ＞そもそもこのコードでjQueryは全く使ってないと思うけど 最近JavaScriptを始めたばかりで <div data-role="button" data-icon="plus" id="add_btn">追加</div> はjQueryではないのでしょうか？ Chromで動作確認しています 正確にはMonacaのプレビューですね ・gear5-0.3.jsは無いので読めない についてなのですがこれはAndroidの対応していないやつのみに出るので問題ありません CSSは下記に張り付けます そして具体的におかしいところなのですが ・追加ボタンの下に表示されるはずの削除ボタンが表示されていない ・テキストを書き込み追加を押すと追加ボタンの下に書き込んだテキストが表示されるはずなのにテキストは表示されず画面の一番上にチェックボックスだけが表示される ということです input.large[type="checkbox"] { -webkit-appearance: none; position: relative; margin-right: 5px; border-radius: 8px; border: 2px solid #4c4c4c; -webkit-box-sizing: border-box; width: 20px; height: 20px; background: -webkit-gradient( linear, left top, left bottom, from(#fdfdfd), to(#d1d1d1) ); } /* チェック時は背景色を変更 */ input[type="checkbox"]:checked { background: -webkit-gradient( linear, left top, left bottom, from(#FFFFFF), to(#8f8f8f) ); } /* チェックの印を:before疑似要素と:after疑似要素を使って作成 */ input.large[type="checkbox"]:checked:before { position: absolute; left: 1px; top: 17px; display: block; -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 1); content: ""; width: 10px; height: 4px; background: #FFFFFF; -webkit-transform: rotate(45deg); -webkit-transform-origin: right center; } input.large[type="checkbox"]:checked:after { display: block; position: absolute; left: 9px; top: 17px; content: ""; -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 1); width: 19px; height: 4px; background: #FFFFFF; -webkit-transform: rotate(-53deg); -webkit-transform-origin: left center; }

その他の回答 (1)

noname#218036
noname#218036
回答No.1

jquery.jsがリンクされてないけど、ここへ書くの忘れただけなの？

DreamyLife_615
質問者

補足

ご回答ありがとうございます 現在Monacaという開発環境で組んでおりそこのプラグインでjQueryを入れているのでリンクさせなくとも大丈夫だと思います 今反映されていないのは削除ボタンですので headerや追加ボタンはしっかりと反映しています このままコピペで使っていただけたらお分かりになると思いますが ・削除ボタンが反映されていない ・追加を押したときにおかしなことになる ここがどうしてこうなるのかがわかりません＞＜

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • 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>

  • 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> <!--Android1.6対策--> <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>

  • jQueryでデータを受け渡しで動作が・・・。

    jQueryでデータを受け渡しで動作がどうしてもうまくいきません。 <li>タグにjsonデータを呼び出して表示しています。 それで別の処理のデータを加えるとどうしても最大６行表示の方が機能しなくなってしまいどうしたらうごくのでしょうか？ 普通においただけではダメなのでしょうか？ <script type="text/javascript"> jQuery(function(){ $.getJSON("./json_sql.php",function(data){ $.each(data,function(i,items){ $("<li/>",{ text : items.category+'　'+ items.date+'　'+items.content, 'class' : items.category, }).appendTo('ul','#portfolio'); }); }); }); $(document).ready(function() { var max = 6 /* 最大表示数 */ var mx = ':lt(' + max + ')', pf = $('#portfolio li'); pf.filter(':not(' + mx + ')').hide(); $('#navi a').click(function(){ var filterVal = '.' + $(this).text().toLowerCase().replace(' ', '-'); if(filterVal=='.all') filterVal = '*'; pf.filter(':visible').fadeOut('fast', function(){ pf.filter(filterVal + mx).fadeIn('slow'); }); }); }); </script> <div id="main"> <ul id="navi" class="tab"> <li class="all"><a href="#" onclick="document.getElementById('samplebox').style.backgroundColor = '#e2260d';">ALL</a></li> <li class="topix"><a href="#" onclick="document.getElementById('samplebox').style.backgroundColor = '#0f639f';">topix</a></li> <li class="cleaning"><a href="#" onclick="document.getElementById('samplebox').style.backgroundColor = '#0e99b0';">cleaning</a></li> <li class="insurance"><a href="#" onclick="document.getElementById('samplebox').style.backgroundColor = '#0ea653';">insurance</a></li> </ul> <div id="samplebox"></div> <div class="content"> <ul id="portfolio"></ul> </div> <!--/ .main--> </div>

  • 1ページ内で複数のwindow.onload = functionの動作

    Ajaxを使用して取得してきたRSSをinnerHTMLで表示するスクリプトを1ページ内に複数設置したいのですが、うまくいきません。 prototype.jsを使うと複数のonloadを制御できるという記事を参考にしたのですが、動作しませんでした。（WindowsIE6で検証してます） http://hori-uchi.com/archives/2005_09.html BODY以下のソースはこちらです。現状だとどちらか一つだけなら動作する感じです。これをどちらも動作する方法をご教授いただけませんでしょうか。宜しくお願いします。 //RSS取得1箇所目 <div id="p1">roading1</div><script> window.onload = function(){ var u = document.getElementsByTagName("head")[0].appendChild(document.createElement("script")); u.type = "text/javascript"; u.charset = "utf-8"; u.src = "http://###"; } var xml = {}; xml.onload = function(data){ var items1 = data.items; var g = "\n"; for(var i = 0; i < Math.min(items1.length, 20); i++){ // } document.getElementById("p1").innerHTML = g; } </script> //RSS取得2箇所目 <div id="p2">roading2</div><script> window.onload = function(){ var u = document.getElementsByTagName("head")[0].appendChild(document.createElement("script")); u.type = "text/javascript"; u.charset = "utf-8"; u.src = "http://***"; } var xml = {}; xml.onload = function(data){ var items2 = data.Result; var h = "\n"; for(var i = 0; i < Math.min(items2.length, 20); i++){ // } document.getElementById("p2").innerHTML = h; } </script>

  • jQuery - bind('click', x)

    <!DOCTYPE html> <script src="jquery-1.7.1.js"></script> <style> .menu_items { display: none; } </style> <script> $(function() { $('.dropdown').each(function () { var menu = $(this).parent().children('.menu_items'); var hideFunc = function() { menu.slideUp(120); $(document).unbind('click', hideFunc); }; $(this).click(function() { menu.slideDown(120); $(document).bind('click', hideFunc); }); }); }); </script> <div> <button class="dropdown">Currency</button> <ul class="menu_items"> <li><button>USD</button> <li><button>EUR</button> <li><button>GBP</button> </ul> </div> -- jquery でメニューに表示・非表示をしたいと思ってます。 click したあとに、メニューを消す命令を bind してるってのに、 この hideFunc （メニューを消す命令） がすぐ呼ばれてしまいます。 適当な配列をフラグに使って二回目呼ばれたときには消す、みたいな解決策を思い来ましたが、 いまいちスマートな感じがしません。 ちゃんとクリックが終わったあとに hideFunc をバインドしたいのですが、それはなにかいい書き方あれば教えてください

  • WebDatabaseのlistから選択項目表示

    HTML5 Web Database でlistから選択した項目を詳細表示したい。詳細一覧detail_b()押下した際、listで選ばれているレコード内容を表示したい。色々試しているのですが・・・どこがおかしいかわかりません。 function load() で list.options[list.options.length] = new Option(row.val2, row.val, row.key1); 項目表示した場合、 function detail_b() で どのようなSELECT文を書けば listで選択された行を指定できるのですか？ <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script type="text/javascript"> var db = openDatabase("my_sample3", "", "Sample for my3", 1024*1024); db.transaction(function(tx) { tx.executeSql("create table if not exists storage (key1, val, val2)"); }); function load() { db.transaction(function(tx) { tx.executeSql("select * from storage", [], function(tx, rs) { var list = document.getElementById("list"); list.innerHTML = ""; var rows = rs.rows; for (var i = 0, n = rows.length; i < n; i++) { var row = rows.item(i); list.options[list.options.length] = new Option(row.val2, row.val, row.key1); } }); }); } function detail_b() { var list = document.getElementById("list"); if (list.selectedIndex < 0) { return; } var selected = list.options[list.selectedIndex].value; db.transaction(function(tx) { tx.executeSql("select * from storage where key1 = ?", [selected], function(tx, rs) { var rows = rs.rows; var row = rows.item(0); detail.innerHTML = ""; detail.options[detail.options.length] = new Option(row.val2, row.val, row.key1); }); }); } function remove() { 省略 } function add() { 省略 } </script> </head> <body onload="load()"> <h1></h1> <table border="0"> <tbody> <tr> <td colspan="2"><select id="list" size="5" style="width: 200px"></select></td> <td><button onclick="detail_b()">詳細一覧</button><BR><button onclick="remove()">削除</button></td> <td rowspan="4"><select id="detail" size="5" style="width: 400px"></select></td> </tr> <tr> <td><font face="Times New Roman">キー:</font></td> <td><input type="text" id="key1"></td> <td></td> </tr> <tr> <td><font face="Times New Roman">値:</font></td> <td><input type="text" id="value"></td> <td></td> <td></td> </tr> <tr> <td><font face="Times New Roman">値２:</font></td> <td><input type="text" id="value2"></td> <td><button onclick="add()">追加</button></td> </tr> </tbody> </table> </body> </htm>

    • ベストアンサー
    • HTML
  • jQueryを利用してのランダム表示について

    jQueryを学習しています。学習し始めてから1ヵ月程度になります。 途中まで考えたのですが、次にどうしたらいいか検討がつきません。 基本的なこともあまりわかっていない状況での質問で申し訳ありません。 どなたかご教授のほどお願いいたします。 考えていることは以下になります。 ・Nextのボタンを押すとランダムでclass=boxの内容を１つ表示したい ・再度、Nextのボタンを押すと表示されていたものが消えて、別のclass=boxを表示したい ////////////////　スクリプト　//////////////// <script type="text/javascript"> var a = ".box" $(function(){ $(a).hide(); }); $(function(){ $("#tugi").click( function(){ var items = $(a).get().sort(function() { return Math.round(Math.random()) ; }).slice(0, 1); $(items).show(); }); }); $(function(){ $(".answer").hide(); }); $(function(){ $(".kirikae").click( function(){ $(this).next().toggle(); }); }); </script> ////////////////　HTML　//////////////// <body> <div id="wrap"> <input type="button" value="Next"id="tugi"/> <div id="1" class="box"> 問題1 <br /> <input type="button"value="答えの表示" class="kirikae"/> <div class="answer"> 答え1 <!-- /div .answer --></div> <!-- /div#1 --></div> <div id="2" class="box"> 問題2<br /> <input type="button"value="答えの表示" class="kirikae"/> <div class="answer"> 答え2 <!-- /div .answer --></div> <!-- /div#2 --></div> <div id="3" class="box"> 問題3<br /> <input type="button"value="答えの表示" class="kirikae"/> <div class="answer"> 答え3 <!-- /div .answer --></div> <!-- /div#3 --></div> <div id="4" class="box"> 問題4<br /> <input type="button"value="答えの表示" class="kirikae"/> <div class="answer"> 答え4 <!-- /div .answer --></div> <!-- /div#4 --></div> <!-- /div#wrap --></div> </body>

  • JQuery インプット要素 カウント減算について

    お世話になります。 JQueryを使用してインプット要素を追加・削除できるようにするアプリケーションを作成してます。 問題は、インプット要素の数を追加した合計数量を取得し削除をした場合、うまくいかない事です。 下記はコードです。 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="../library/js/jquery-1.6.js"></script> <link rel="stylesheet" href="../library/css/defult.css"> <link rel="stylesheet" href="../library/css/style.css"> <title>メールアドレス登録</title> <script type="text/javascript"> <!-- $(document).ready(function(){ $(function() { var count; var scntDiv = $('tbody.row'); var i = $('#row').size() + 2; $('#addScnt').live('click', function() { $('<tr><td><input type="text" style="width: 320px;" name="emailAddress_' + i +'" /></td><td><a href="#" id="addScnt">Add</a></td><td><a href="#" id="remScnt">Remove</a></td></tr>').appendTo(scntDiv); count = i++; document.getElementById('cnt').value=count; return false; }); $('#remScnt').live('click', function() { if( i > 2 ) { $(this).parents('p').remove(); count = i--; document.getElementById('cnt').value=count; } return false; }); }); }); --> </script> </head> <body> <div id="content"> <h1>メールアドレス登録</h1> <form id="multi"> <table> <tbody class="row"> <tr> <td><input type="text" style="width: 320px;" name="emailAddress_1" /></td> <td><a href="#" id="addScnt">Add</a></td> </tr> </tbody> </table> <input type="hidden" name="cnt" id="cnt" /> <div id="process"> <input type="submit" class="processing" name="submit" value="次へ"/> </div> </form> </div> </body> </html>

  • 引数を持つコールバック関数をonloadで複数実行

    下記のような内容で、指定したidを持つ要素に新しい内容を追加したいのですが、この内容だとcontent2のidを持つdiv要素にしか内容が追加されません。 そこで、対象となるidを持つ要素をいくつ追加しても反映されるようにしたいのですが、これを実現するにはどうしたら良いでしょうか？ アドバイス等、何かしらお力添えを頂ければ幸いです。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>Title</title> <script type="text/javascript"> // </body>直前には置きたくない // 指定したidを持つ要素に新たな内容を追加する関数 function ins( id ) { var output = document.createElement( 'span' ); output.innerHTML = '<p>content</p>'; // 追加する内容はhtmlやjavascriptなど必要に応じて変化する var element = document.getElementById( id ); element.appendChild( output ); } window.onload = function() { ins( 'content1' ); } window.onload = function() { ins( 'content2' ); } </script> </head> <body> <div id="content1"></div> <!-- window.onloadではins( 'content2' );に上書きされてしまう --> <div id="content2"></div> <!-- <div id="content3"></div> <div id="content4"></div> ... いくつ追加しても対応出来るようにしたい --> </body> </html>

  • よろしくお願い致します。

    よろしくお願い致します。 サイトのソースを整理しているなかで、何かの解析用のものと思われる 不明な記述を見つけました。お分かりになる方がいらっしゃいましたら 教えて下さい。 <div class="moz-text-flowed" style="font-family: -moz-fixed"><script language="Javascript" type="text/javascript"> <!-- var account_id="000000000000000←この部分は数字を書き換えてあります"; var transaction_id = ""; var amount = ""; if (location.protocol == "https:") { var protocol = "https:"} else { var protocol = "http:" } document.write("<img width=1 height=1 border=0 src='" + protocol + "//b90.yahoo.co.jp/c?account_id=" + account_id + "&transaction_id=" + transaction_id + "&amount=" + amount + "'>"); //--> </script></div> お手数ですがよろしくお願い致します。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する