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

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

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

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

HTML

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

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

642閲覧

js ページ移動時に生成したhtml要素が消えない方法

zuru17830405

総合スコア11

JavaScript

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

HTML

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

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

1クリップ

投稿2021/12/13 12:47

1. 【必須】やりたい・やりたかったこと

目標を設定し、html要素に生成されたli要素がトップページボタンでページを移動後もう一度、目標画面のhtmlページに戻ると生成したli要素が消えてしまっている状態ですが、ページを移動しても生成され表示されているli要素がそのままの状態を維持したいです。
よろしくお願いします。

2. 【必須】起きている問題やエラーメッセージ

なし

3. 【必須】ご自身で試されたこと ※できるだけ詳細に書いてください

イベントの外で「 let textsArray = new Array();」を定義し、生成されたものを配列に格納し保持させたのですが、ページ移動して戻ってくると消えてしまっていました。

4. 関連するソースコードやスクリーンショット ※主に関わっているのは点線の中身です

HTML

1<body class="black"> 2 <div class="container"> 3 <main id="main2"> 4 <h1 class="big-title">目標</h1> 5 <div class="objective"> 6 <p id="objectiveText">目標が設定されていません</p> 7 <ul id="dayList"> 8 <!--設定した目標を表示していく--> 9 </ul> 10 <ul id="weekList"> 11 <!--設定した目標を表示していく--> 12 </ul> 13 <ul id="monthList"> 14 <!--設定した目標を表示していく--> 15 </ul> 16 </div> 17 <h1 class="big-title">設定</h1> 18 <div id="creation"><!--目標設定フォーム--> 19 <form name="form" id="form"> 20 <div class="period"> 21 <span class="creation-text">期間:</span> 22 <input type="radio" name="period" value="今日"><span class="creation-text radio-text">今日</span> 23 <input type="radio" name="period" value="今週"><span class="creation-text radio-text">今週</span> 24 <input type="radio" name="period" value="今月"><span class="creation-text radio-text">今月</span> 25 </div> 26 <div class="what"> 27 <span class="creation-text">何を:</span> 28 <input type="text" name="what"> 29 </div> 30 <div class="time"> 31 <span class="creation-text">時間:</span> 32 <input type="text" name="timeH"><span class="creation-text">時間</span> 33 <input type="text" name="timeM"><span class="creation-text">分</span> 34 </div> 35 <a id="btn6" href="#">設定</a> 36 </form> 37 </div> 38 <div class="send-btn send-btn2"> 39 <a id="btn7" class="btn" href="timer.html">トップページ</a> 40 <a id="btn4" class="btn" href="timerRecord.html">記録</a> 41 </div> 42 </main> 43 </div> 44 </body>

JavaScript

1 let btn6 = document.getElementById('btn6'); 2 3 //ページの移動によって目標が消えないように買うのうするための配列 4 let textsArray = new Array();   //この部分 5 6 //設定ボタンクリック時のイベント 7 if(btn6 != null) { 8 btn6.addEventListener('click', ()=> { 9 makeObjective(); 10 }); 11 } 12 13 //アラートに表示する文を格納して置くための配列 14 let alert = new Array(); 15 16 //アラートに表示する文を変数に格納 17 let allAlert = '※全ての項目を必ず記入してください'; 18 let timeAlert = '※時間の項目は正しい形で記入してください'; 19 20 //設定に入力された目標を objective-list に表示する関数 21 function makeObjective() { 22 23 //設定でinputに入力された値を取得 24 let form = document.forms.form; 25 let period = form.period.value; 26 let what = form.what.value; 27 let timeH = form.timeH.value; 28 let timeM = form.timeM.value; 29 30 //HTML要素の表示する場所を取得(今日、今週、今月を分けれるように) 31 let list; 32 let dayList = document.getElementById('dayList'); 33 let weekList = document.getElementById('weekList'); 34 let monthList = document.getElementById('monthList'); 35 //「目標が設定されません」を取得してクラスの追加によって非表示にする 36 let objectiveText = document.getElementById('objectiveText'); 37 objectiveText.classList.add('nolook'); 38 39 //今日、今週、今月の順番になるように追加する 40 if(form.period.value === '今日') { 41 list = dayList; 42 } else if(form.period.value === '今週') { 43 list = weekList; 44 } else if(form.period.value === '今月') { 45 list = monthList; 46 } 47 48 //li要素を生成して入力結果を入れ込む 49 let li = document.createElement('li'); 50 let text1 = period + ':' + what + 'を' + timeH + '時間' + timeM + '分取り組む'; 51 let text2 = period + ':' + what + 'を' + timeH + '時間取り組む'; 52 let text3 = period + ':' + what + 'を' + timeM + '分取り組む'; 53 54 //ひとつでも空白だった場合 55 if(period === '' || what === '' || timeH === '' || timeM === '') { 56 alert.push(allAlert); 57 } 58 59//---------------------------------------------------------------------------------------------------- 60 //ページの移動によって目標が消えないように買うのうするための配列 61 let texts = new Array(); 62 63 if(timeH < 0 || timeH > 167 || timeM < 0 || timeM > 59) { 64 alert.push(timeAlert); 65 } else { 66 //時間、分がそれぞれ記入されていない時はされている方だけ表示 67 if(timeH !== '' && timeM !== '') { 68 texts.push(text1); 69 } else { 70 if(timeH !== '' && timeM === '') { 71 texts.push(text2); 72 } else if(timeH === '' && timeM !== '') { 73 texts.push(text3); 74 } 75 } 76 } 77 78 //配列の中から一番最後のvalueを取得する 79 let textsLast = texts.slice(-1)[0]; 80 textsArray.push(textsLast); 81 82 //配列の最後のvalueをテキストとして表示 83 li.textContent = textsLast; 84 list.appendChild(li); 85 86 console.log(textsArray); 87 88//---------------------------------------------------------------------------------------------------- 89 90 //配列の中から必要なvalueを取得する 91 let alertValue = alert.map(function(value) { 92 return value; 93 }); 94 95 let alertArrayValue = new Array(); 96 97 if(alertValue.length === 1) { 98 alertArrayValue.push(alertValue[0]); 99 } else if(alertValue.length === 2) { 100 alertArrayValue.push(alertValue[0], alertValue[1]); 101 }; 102 103 let alertArrayValuejoin = alertArrayValue.join('\n'); 104 105 if(alertArrayValue.length >= 1) { 106 window.alert(alertArrayValuejoin); 107 objectiveText.classList.remove('nolook'); 108 } 109 110 }

5. 使用言語・ライブラリのバージョン ※できるだけ詳細に書いてください

JavaScript、HTML

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

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

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

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

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

m.ts10806

2021/12/13 12:59

>起きている問題やエラーメッセージ なし 問題が起きてないのに何を聞きたいのでしょう。
guest

回答1

0

ベストアンサー

ページが移動すれば、Javascriptで保存してる変数とかは全て消えます。
保存したければ、LocalStorageCookieを使うべきです。
ページがロードした時に、またLocalStorageかCookieから読み込めばいいです。

投稿2021/12/13 14:20

skys215

総合スコア910

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

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

zuru17830405

2021/12/14 04:15

ありがとうございます。調べてみます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.46%

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

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

質問する

関連した質問