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

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

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

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

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

受付中

【JavaScript】リロード直後DOM要素に対して実行する変更内容を、リロード後も維持する方法について

miikan023
tomato39

総合スコア3

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

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

1回答

0リアクション

0クリップ

251閲覧

投稿2022/09/12 14:52

前提

最近JavaScriptを学び始めたビギナーです。
HTMLとJavaScriptで簡単なアンケートフォームを作成してます。

仕様は以下のようなものです↓
・ボタンクリック後に記載内容の有無を調べるバリデーション
・空の場合はアラートで警告
・入力値をセッションに保存
・保存が確認できたらページを更新
・保存したセッション内容をデフォルトでは非表示にしているliタグ内に入れ表示

実現したいこと

・リロード後も関数rewriteで実行する内容を維持したい

発生している問題

リロードされた後に対象要素のテキストを変更させ、
その要素を表示させたいが、リロード後に全て消えてしまう。

該当のソースコード

HTML/JavaScript

<!DOCTYPE html> <html> <head> <title>アンケート</title> <style> #conf{ display: none; } </style> </head> <body> <h1>アンケートフォーム</h1> <form id="a_form"> 氏名:<input type="text" name="name" value="" /> 年齢:<input type="number" name="age" value="" /> </form> <button id="a_bt">確認</button> <ul id="conf"> <li class="name"></li> <li class="age"></li> </ul> <script> //確認ボタンを押したイベントを取得 document.getElementById('a_bt').addEventListener('click',function(){ var savedFormData = saveInput(getFormInput()); var {name, age} = savedFormData; if (savedFormData !== ' ') { loadPage(); rewrite(name,age); } }); //formの入力値を取得し、空かどうかをチェック function getFormInput() { var messages = []; var nameInput = document.querySelector('[name=name]').value; var ageInput = document.querySelector('[name=age]').value; //入力が空だった時はアラートを表示 if (nameInput === '' || nameInput === null) { messages.push('氏名を入力して下さい。'); } if (ageInput === '' || ageInput === null) { messages.push('年齢を入力して下さい。'); } if (messages.length > 0) { alert(messages.join('\n')); } else { return { nameInput, ageInput }; } } //入力があれば、入力値をセッションに保存 function saveInput(func) { if (func !== ' '){ var {nameInput,ageInput} = func; if (window.localStorage) { sessionStorage.setItem('name',nameInput); sessionStorage.setItem('age',ageInput); const name = sessionStorage.getItem('name'); const age = sessionStorage.getItem('age'); return { name, age }; } } else { return false; } } //セッションに保存したら、画面を更新 function loadPage() { document.location.reload(); //console.log('hello'); return true; } //保存したセッションがconfのそれぞれのliタグ内に表示 function rewrite(name,age) { var savedFormData = saveInput(getFormInput()); var {name, age} = savedFormData; document.querySelector('.name').textContent = name; document.querySelector('.age').textContent = age; //この時、formは非表示、ulを表示する var form = document.getElementById('a_form'); var lists = document.getElementById('conf'); form.style.display = 'none'; lists.style.display = 'block'; } </script> </body> </html>

試したこと

document.location.reload();の箇所を、
代わりにconsole.log('hello');など適当なものに変更すると
ほかは思う通りの動きをするので、これが問題なんだろうなとは思うのですが...
解決策が思い浮かばず詰まってしまったため、投稿しました。

以下のような質問にはリアクションをつけましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

リアクションが多い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

int32_t

2022/09/12 14:56

何のためにリロードしているのでしょうか。
miikan023

2022/09/12 15:00

セッションが保存された後、自動的にリロードし、liタグの内容を表示させたいためです。
int32_t

2022/09/12 15:04 編集

リロードなしで同じ結果の画面を作ったほうが簡単だと思いますが、リロードが必須なのですか?
miikan023

2022/09/12 15:09

はい、それは承知ですが.. リロードは必須の仕様にしたいです。 別のものを以前作成している時に同じような問題に直面し、 諦めたことがあるので、ヒントを得れたらなと思い投稿しました。

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
86.12%

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

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

質問する

関連した質問

同じタグがついた質問を見る

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

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