- 締切済み
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>
- DreamyLife_615
- お礼率12% (16/124)
- JavaScript
- 回答数1
- ありがとう数0
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- think49
- ベストアンサー率59% (285/482)
グローバルコードにおける var name; は window.name を参照する為と思われます。 ローカル変数にしてみて下さい。 https://developer.mozilla.org/ja/docs/Web/API/Window/name http://okwave.jp/qa/q6404370.html # Re: DreamyLife_615さん
関連するQ&A
- 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>
- 締切済み
- JavaScript
- 表の作成
いつもお世話になっています。 下記の構文で表を作成した際に、セルの幅がずれてしまいます。 <TABLE border="1" cellspacing="0" width="940"> <TBODY> <TR> <TH height="17" width="790" colspan="5">A</TH> <TH height="17" width="75" rowspan="2">G</TH> <TH height="17" width="75" rowspan="2">H</TH> </TR> <TR> <TH height="17" width="150">B</TH> <TH height="17" width="80" >C</TH> <TH height="17" width="220">D</TH> <TH height="17" width="280">E</TH> <TH height="17" width="60" >F</TH> </TR> </TBODY> </TABLE> <TABLE border="1" cellspacing="0" width="940"> <COLGROUP> <col width="150"> <col width="80" > <col width="220"> <col width="280"> <col width="60" > <col width="75" > <col width="75" > </COLGROUP> <TBODY> <TR height="30"> <TD><FONT SIZE="-1">○</FONT></TD> <TD><FONT SIZE="-1">×</FONT></TD> <TD><FONT SIZE="-1">△</FONT></TD> <TD><FONT SIZE="-1">□</FONT></TD> <TD><FONT SIZE="-1">◆</FONT></TD> <TD align="center"> <INPUT type="button" value="◎" style="width:55px;height:27px" onClick=""> <!-- ж --> </TD> <TD align="center"> <INPUT type="button" value="Δ" style="width:55px;height:27px" onClick=""> <!-- ☆ --> </TD> </TR> </TBODY> </TABLE> どなたか解決方法を教えていただけないでしょうか？ よろしくお願いいたします。
- ベストアンサー
- HTML
- htmlでインプットボックスを横並びに表示したい。
ホームページを作成しておりますが、tdの中にinput type="text"にてテキストボックスを4つ作成したいと考えております。 こちらで拝見いたしましたチェックボックスの右側に文字を表示される方法をご参考にさせていただき、下記を作成しましたが、縦並びになってしまいます。 何とかして縦2×横2に置き換えることはできないでしょうか？ ブラウザはIE11を使用しており、コードはVisualStudioCodeを使用しております。 <div style="top : 161px;left : 8px; position : absolute; z-index : 4; width : 847px; height : 252px; " id="Layer5"> <div style="background: white; padding: 10px; margin-bottom: 10px; border: 1px solid #333333"> <table border="1" height="252" width="818"> <tr bgcolor="gray" style="color:white" height="50"> <th height="42" width="92"><b>列1</b></th> <th height="42" width="212">列2・列3<br>列4・列5</th> <th height="42" width="137">列7/列8</th> <th height="42" width="189"><b>列9/列10</b></th> </tr> <tr bgcolor="lightyellow"> <td align="center" height="47" width="92"> <input type="text" name=列1 style="background:white; color:#000000;" align="middle" value="83行目"> </td> <td align="center" height="47" width="312"> <input type="text" name=列2 style="background:white; color:#000000;" align="middle" value="86行目"> <input type="text" name=列3 style="background:white; color:#000000;" align="middle" value="87行目"> <input type="text" name=列4 style="background:white; color:#000000;" align="middle" value="88行目"> <input type="text" name=列5 style="background:white; color:#000000;" align="middle" value="89行目"> </td> <td align="center" height="47" width="137"><input type="text" name=列7 style="background:white; color:#000000;" align="middle" value="92行目"> <span> <input type="text" name=列8 style="background:white; color:#000000;" align="middle" value="93行目"> </span> </td> </div> <td align="center" height="47" width="189"><input type="text" name=列9 style="background:white; color:#000000;" align="middle" value="96行目"> <input type="text" name=列0 style="background:white; color:#000000;" align="middle" value="97行目"> </td> </tr> <tr> <td align="center" height="47" width="92"></td> <td align="center" height="47" width="212"></td> <td align="center" height="47" width="137"></td> <td align="center" height="47" width="189"></td> </tr> </table> </div> </div> 【上記で表示させた場合】 ーーーーー｜ 86行目 ｜ーーーーー｜ ーーーーー｜ 87行目 ｜ーーーーー｜ 96行目 83行目 ｜ 88行目 ｜ 92行目｜ 97行目 ーーーーー｜ 89行目 ｜ーーーーー｜ 【やりたいこと】 ーーーーー｜ーーーーーーーーーー｜ーーーーー｜ ーーーーー｜ 86行目｜87行目 ｜ーーーーー｜ 96行目 83行目 ｜ 88行目｜89行目 ｜ 92行目 ｜ 97行目 ーーーーー｜ーーーーーーーーーー｜ーーーーー｜
- ベストアンサー
- JavaScript
- JavaScriptのtable保存について
先日時間割り表を作り以下のコードを書きました これをアプリにして自分のスマホに入れたのですがAndroidのためcookieが対応していません そこでlocalStorageを使えば可能ということを聞きました <body background="img/st18.png"> <center> <font style="font-size:30pt;"> <font color="#4795F4"><b><i>Monday</i></b></font> </font> <br><br> <a href="sat.html"><img src="img/blsat.gif" width="50" height="25"></a> <a href="index.html"><img src="img/blhome.gif" width="50" height="25"></a> <a href="tue.html"><img src="img/bltue.gif" width="50" height="25"></a> <form> <br> <table border="3" bordercolor="#4795F4" align="center" bgcolor="#DDFFFA"> <tr align="center"><th>時間</th><th>科目</th><th>教室</th><th>備考</th></tr> <tr align="center"><td width="20" height="80">1</td><td width="70"><span id="sbj1"></span></td> <td width="60"><span id="crm1"></span></td><td width="100"><span id="com1"></span></td> <tr align="center"><td width="20" height="80">2</td><td width="70"><span id="sbj2"></span></td> <td width="60"><span id="crm2"></span></td><td width="100"><span id="com2"></span></td> <tr align="center"><td width="20" height="80">3</td><td width="70"><span id="sbj3"></span></td> <td width="60"><span id="crm3"></span></td><td width="100"><span id="com3"></span></td> <tr align="center"><td width="20" height="80">4</td><td width="70"><span id="sbj4"></span></td> <td width="60"><span id="crm4"></span></td><td width="100"><span id="com4"></span></td> <tr align="center"><td width="20" height="80">5</td><td width="70"><span id="sbj5"></span></td> <td width="60"><span id="crm5"></span></td><td width="100"><span id="com5"></span></td> <span id="testarea"></span> </form> </body> <script> <!-- monaca.viewport({width: 320}); function setCookie(c_name,value,expiredays){ // pathの指定 変数名 var path = location.pathname; // pathをフォルダ毎に指定する場合のIE対策 var paths = new Array(); paths = path.split("/"); if(paths[paths.length-1] != ""){ paths[paths.length-1] = ""; path = paths.join("/"); } // 有効期限の日付 これがないと編集できない var extime = new Date().getTime(); var cltime = new Date(extime + (60*60*24*1000*expiredays)); var exdate = cltime.toUTCString(); // クッキーに保存する文字列を生成 これがないと保存できない var s=""; s += c_name +"="+ escape(value);// 値はエンコードしておく s += "; path="+ path; if(expiredays){ s += "; expires=" +exdate+"; "; }else{ s += "; "; } // クッキーに保存 document.cookie=s; } function getCookie(c_name){ var st=""; var ed=""; if(document.cookie.length>0){ // クッキーの値を取り出す st=document.cookie.indexOf(c_name + "="); if(st!=-1){ st=st+c_name.length+1; ed=document.cookie.indexOf(";",st); if(ed==-1) ed=document.cookie.length; // 値をデコードして返す return unescape(document.cookie.substring(st,ed)); } } return ""; } //変数設定 if(getCookie('mon_sects1')){var sect1 = getCookie('mon_sects1');}else{var sect1 = "科目1,教室,備考";} if(getCookie('mon_sects2')){var sect2 = getCookie('mon_sects2');}else{var sect2 = "科目2,教室,備考";} if(getCookie('mon_sects3')){var sect3 = getCookie('mon_sects3');}else{var sect3 = "科目3,教室,備考";} if(getCookie('mon_sects4')){var sect4 = getCookie('mon_sects4');}else{var sect4 = "科目4,教室,備考";} if(getCookie('mon_sects5')){var sect5 = getCookie('mon_sects5');}else{var sect5 = "科目5,教室,備考";} var sects = new Array(sect1,sect2,sect3,sect4,sect5); //時間割編集ここから function editj(a){ var secname = new Array('mon_sects1','mon_sects2','mon_sects3','mon_sects4','mon_sects5'); editsec = window.prompt("「科目,教室,備考」の順に入力してください", sects[a]); if(editsec){ secookie = secname[a]; setCookie(secookie,editsec,365); location.reload(); } } //時間割編集ここまで //時間割表示 for (i = 0; i < 5; i = i + 1){ j = i + 1; wari = sects[i].split( "," ); var subj = "sbj" + j; var clrm = "crm" + j; var comt = "com" + j; if(wari[0]){ document.getElementById(subj).innerHTML = wari[0]; } if(wari[1]){ document.getElementById(clrm).innerHTML = wari[1]; } document.getElementById(comt).innerHTML = wari[2] + "<br><img src='img/bledit.gif' width='50' height='20' onClick='editj(" + i + ")'>"; } これをlocalStorageで保存するにはどうすればできますか？ もしもcookieを使ってもAndroidで保存できる方法があれば教えてください
- ベストアンサー
- JavaScript
- テーブルの枠線とテキストフィールドの縦、横の隙間をなくしたい
テーブルの枠線とテキストフィールドの縦、横の隙間をなくしたい テーブルの枠線とテキストフィールの枠を隙間なくピッチリとくっつけたい です。コードを掲示しますのでご存知の方はどなたか修正願います <body> <table width="900" border="1" style="height:25px;"> <tr> <td rowspan="2" width="400"> </td> <td rowspan="2" width="50"> </td> <td rowspan="2" width="100"><input type="text"readonly="readonly"value="サンプルシステム（株）" style="height:25px;"/> </td> <td rowspan="2" width="50"> </td> <td rowspan="2" width="100"><input type="text"readonly="readonly" value="システム管理者"style="height:25px;"/> </td> <td width="60"style="height:12px;">実施日</td> <td width="140"><input type="text" readonly="readonly" width="140"value="2010/07/01" style="height:12px;"/></td> <tr> <td height="19" style="height:12px;">CODE</td> <td><input type="text" readonly="readonly" width="140" value="TTSORD50P" style="height:12px;"/></td> </tr> </table> </body>
- ベストアンサー
- HTML
- 複数のtextareaの保存について
下記のコードのようにtextareaが二つあったとします id="a"は保存できましたがid="b"はどうやって保存するのでしょうか？("a", "b")としても無理でした どのようにすれば複数保存できるのでしょうか？ ご回答お願いします <html> <head> </head> <body> <textarea id="a"></textarea> <textarea id="b"></textarea> <script> var a = document.getElementById("a"); window.onload = function() { var body = localStorage.getItem("a"); if (body != null){ a.value = body; } }; a.onchange = function() { localStorage.setItem("a",a.value); }; </script> </body> </html>
- ベストアンサー
- JavaScript
- htmlで行数が増えた場合に自動的に範囲を広げる
現在、ホームページを作成しておりますが、htmlで表示させた場合に一行だけですと画面内に収まりますが、行数が増えていくとその下にあるボタンにかぶさってしまいます。 表示する行数が増えた場合に自動的に下に伸ばす方法はございますでしょうか？ HTML <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="justsystems:HPB-Input-Mode" content="mode/flm; pagewidth=940; pageheight=1200"> <meta name="GENERATOR" content="JustSystems Homepage Builder Version 20.0.6.0 for Windows"> <title>タイトル</title> <link rel='stylesheet' href='/stylesheets/style.css' /> </head> <body bgcolor="#a9a9a9"> <table border="1" height="252" width="818"> <tr bgcolor="gray" style="color:white" height="50"> <th height="42" size=10><b>注文日</b></th> <th height="42" width="212">注文名/オプション<br>注文先・個数</th> <th height="42" size=10>合計金額/合計個数</th> <th height="42" size=20><b>注文者/入力者</b></th> </tr> ーーーここでテーブルから複数行取得 <% for(var i in content) { %> <tr bgcolor="lightyellow"> <% var obj = content[i]; %> <td align="center" height="47" size="10"> <input type="text" name=注文日 size="10" style="background:white; color:#000000;" align="middle" value="注文日"> </td> <td align="center" height="47" width="10" style="white-space:nowrap;" > <input type="text" name=注文名 size=4 style="background:white; color:#000000;" align="middle" value="注文名"> <input type="text" name=オプション size=1 style="background:white; color:#000000;" align="middle" value="無"> <input type="text" name=注文先 size=4 style="background:white; color:#000000;" align="middle" value="注文先"> <input type="text" name=単価 size=1 style="background:white; color:#000000;" align="middle" value="単価"> <input type="text" name=個数 size=1 style="background:white; color:#000000;" align="middle" value="個数"> </td> <td align="center" height="47" size=10> <input type="text" name=合計金額 size=10 style="background:white; color:#000000;" align="middle" value="合計金額"> <input type="text" name=合計数 size=10 style="background:white; color:#000000;" align="middle" value="合計数"> </td> <td align="center" height="47" size=20> <input type="text" name=注文者 size=20 style="background:white; color:#000000;" align="middle" value="注文者"> <input type="text" name=入力者 size=20 style="background:white; color:#000000;" align="middle" value="入力者"> </td> </tr> <% } %> <div style="width : 468px;height : 16px;top : 486px;left : 441px; position : absolute; z-index : 2; " id="Layer7" align="right"> <input type="submit" value=" 結果 "> <input type="button" value=" キャンセル "> <input type="button" value=" 戻 り "> </div> </form> </div> </body> </html>
- ベストアンサー
- HTML
- Javascriptで自動計算の合計の式でエラー
度々すみません。 前回こちらで質問させて頂きましたものです。 http://okwave.jp/qa/q8737139.html 教えて頂いた内容を確認してフォームの合計を表示するところまでは出来たのですが、合計する列をひとつ増設した所、D列の合計は教えて頂いた式で合計が無事表示されたのですが、C列の合計が合計ではなく文字の並びが表示されてしまいました。 色々調べてみたのですが、この現象の原因がよくわかりません。 何かエラーがあるのでしょうか。 お知恵を貸して頂けると嬉しいです。 宜しくお願いします。 ＜スクリプト＞ <script type='text/javascript'> function keisan(){ var price1 = (document.form1.a1.value) * (document.form1.b1.value) * (document.form1.c1.value); document.form1.金額1.value = price1 ; var price2 = (document.form1.a2.value) * (document.form1.b2.value) * (document.form1.c2.value); document.form1.金額2.value = price2 ; var price3 = (document.form1.a3.value) * (document.form1.b3.value) * (document.form1.c3.value); document.form1.金額3.value = price3 ; document.form1.total.value = price1 + price2 + price3; var f1 = (document.form1.c1.value); document.form1.c1.value = f1 ; var f2 = (document.form1.c2.value); document.form1.c2.value = f2 ; var f3 = (document.form1.c3.value); document.form1.c3.value = f3 ; document.form1.ctotal.value = f1 + f2 + f3; } </script> ＜HTMLソース＞ <body> <form method="post" name="form1"> <table width="473" border='1'> <tr> <td align='center'> </td> <td align='center'>A</td> <td align='center'>B</td> <td align='center'>C</td> <td align='center'>D</td> </tr> <tr> <td>1</td> <td><input type='text' name='a1' onchange='keisan()' style='width:50px' /></td> <td><input type='text' name='b1' onchange='keisan()' style='width:50px' /></td> <td><input type='text' name='c1' onchange='keisan()' style='width:25px' /></td> <td><input type='text' name='金額1' style='width:100px' /></td> </tr> <tr> <td>2</td> <td><input type='text' name='a2' onchange='keisan()' style='width:50px' /></td> <td><input type='text' name='b2' onchange='keisan()' style='width:50px' /></td> <td><input type='text' name='c2' onchange='keisan()' style='width:25px' /></td> <td><input type='text' name='金額2' style='width:100px' /></td> </tr> <tr> <td>3</td> <td><input type='text' name='a3' onchange='keisan()' style='width:50px' /></td> <td><input type='text' name='b3' onchange='keisan()' style='width:50px' /></td> <td><input type='text' name='c3' onchange='keisan()' style='width:25px' /></td> <td><input type='text' name='金額3' style='width:100px' /></td> </tr> <tr> <td colspan="3" align='right'>合計</td> <td><input type='text' name='ctotal' style='width:25px' /></td> <td><input type='text' name='total' style='width:100px' /></td> </tr> </table> </form> </body>
- ベストアンサー
- JavaScript
- colspan を使用した際のIE7の動作
行き詰ってしまったのでこちらで質問させていただきます。 テーブルで表を作成しているのですが、 colspanで指定したセルの中にinputを入れると急にIE7でレイアウトが崩れます。 IEの他のverでは大丈夫なのですが、7だけくずれてしまうのは何か回避策があるのでしょうか？ ちなみに、下記のようなソースです。 全体で8列とり、１行目は項目３つに対してそれぞれinputを入れる列があり、 2行目は項目２つでinputを入れる列があります。 1行目は3等分にしたく、2行目は2等分にしたい形です。 何かほかに方法があるのでしょうか？ ご教授いただければと思います。 <style type="text/css"> .test{border-collapse:collapse;} .test td,.test th{border:solid 1px #000;} </style> <table width="952" border="1" cellspacing="0" cellpadding="0" class="test"> <tr> <th width="80">項目1</th> <td width="235"><input name="" type="text" value="12345" /></td> <th width="80">項目2</th> <td colspan="3"><input name="" type="text" value="12345" /></td> <th width="80">項目3</th> <td width="235"><input name="" type="text" value="12345" /></td> </tr> <tr> <th>項目4</th> <td colspan="3"><input name="input2" type="text" value="12345" /></td> <th width="80">項目5</th> <td colspan="3"><input name="input3" type="text" value="12345" /></td> </tr> </table>
- ベストアンサー
- HTML
- ブラウザによってテーブルのセルの高さが変わる
質問させて頂きます。 現在、テーブルを使用して表を作っているのですが、 ブラウザによってセルの高さが変わってしまいます。 safariでは思った通りのレイアウトになるのですが、 chrome、Firefoxでは [ height ] の値が反映されていないのか、 崩れてしまいます。 添付は希望するレイアウト（safariではこのように表示されます）です。 ソースを記載しますので、どなたかご教示お願い致します。 --- html --- <table class="hogs" cellspacing="5"> <tr> <td width="180" height="184" rowspan="3"><img src="img/001.gif" width="180" height="184" alt=""/></td> <th height="22">項目１</th> <td>文章１</td> </tr> <tr> <th height="22">項目２</th><td height="22">文章２</td> </tr> <tr> <th height="140" valign="top">項目３</th><td valign="top">文章３</td> </tr> </table> --- CSS --- table.hoge { background-color: rgba(50,50,50,0.3); width: 640px; height: 184px; margin: 0 auto 18px; padding: 10px; } table.hoge th { height: 22px; background-color: #7ac0c9; width: 80px; } table.hoge td { padding: 0 20px; }
- ベストアンサー
- HTML
