質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

2回答

849閲覧

リロードした時にLocalStorageにinput valueで設定している初期値が保存される

退会済みユーザー

退会済みユーザー

総合スコア0

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

1クリップ

投稿2019/03/05 02:17

編集2019/03/05 02:18

お世話になってます。

入力フォームでバリデーションをかけ、エラーが表示された際にリロードされるのですが
リロードされてもフォームに入力した内容は、そのまま表示させて置きたいので
LocalStorageを使用しています。

しかし、リロードされた時にinputタグのvalue属性に初期値が設定されていた場合、
その初期値がLocalStorageに保存されてしまいます。

html

1<form id="make" method="post" action="get.php"> 2 <ul> 3 <!-- ユーザー名前 --> 4 <li> 5 <label for="name">ユーザー :</label> 6 <input id="name" class="box" type="text" name="user"> 7 </li> 8 9 <!-- タイトル --> 10 <li> 11 <label for="title">タイトル : </label> 12 <input id="title" type="text" name="title"> 13 </li> 14 15 <!-- 掲載開始日 --> 16 <li> 17 <label for="body">掲載開始日 : </label> 18 <input id="startY" maxlength="4" type="text" name="start_year" value="2019">19 <input id="startM" maxlength="2" type="text" name="start_month" value="03">20 <input id="startD"maxlength="2" type="text" name="start_day" value="01">21 </li> 22 23 <!-- 掲載終了日 --> 24 <li> 25 <label for="body">掲載終了日 : </label> 26 <input id="endY" maxlength="4" type="text" name="finish_year">27 <input id="endM" maxlength="2" type="text" name="finish_month">28 <input id="endD" maxlength="2" type="text" name="finish_day">29 </li> 30 31 <!-- 本文 --> 32 <li> 33 <label for="body">本文: </label> 34 <textarea id="textarea" type="textarea" name="body"></textarea> 35 </li> 36 </ul> 37 38 <button id="button" type="submit">掲載する</button> 39</form>

js

1document.getElementById("button").onclick = saveStorage(); 2 3function saveStorage() 4{ 5 var name = document.getElementById('name').value;//user name 6 var title = document.getElementById('title').value;//title 7 var textarea = document.getElementById('textarea').value;//body 8 9 var startY = document.getElementById('startY').value; //掲載開始日 10 var startM = document.getElementById('startM').value; 11 var startD = document.getElementById('startD').value; 12 13 var endY = document.getElementById('endY').value; //掲載終了日 14 var endM = document.getElementById('endM').value; 15 var endD = document.getElementById('endD').value; 16 17 window.localStorage.setItem("name",contributor); 18 window.localStorage.setItem("title",title); 19 window.localStorage.setItem("textarea",textarea); 20 21 window.localStorage.setItem("startY",startY); 22 window.localStorage.setItem("startM",startM); 23 window.localStorage.setItem("startD",startD); 24 25 window.localStorage.setItem("endY",endY); 26 window.localStorage.setItem("endM",endM); 27 window.localStorage.setItem("endD",endD); 28 29 30 console.log("LocalStorageに保存しました。"); 31 return; 32} 33

上記の場合、**「掲載開始日」**にUserが何を入力しても、inputタグのvalue属性に指定してある
デフォルト値(2019,03,01)が入ってしまいます。

どうしたら、inputタグのvalue属性のデフォルト値ではなく、
Userが入力した値をLocalStorageへ保存できるでしょうか。

ご教示いただけましたら幸いです。
よろしくお願いいたします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ベストアンサー

js

1//document.getElementById("button").onclick = saveStorage(); 2var button = document.getElementById('button'); 3button.addEventListener("click",saveStorage);

これでできました。

投稿2019/03/05 02:49

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

代入する際に実行しているからでは。

js

1// document.getElementById("button").onclick = saveStorage(); 2// ↓ 3 document.getElementById("button").onclick = saveStorage;

投稿2019/03/05 02:29

kei344

総合スコア69364

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問