このコードは、「textareaに入力されたテキストが改行も含めて、表示ボタンが押されたときに表示される。フォントサイズを指定することができる。ページが再読み込みされたとき、Cookieに保存されている前回のデータが復元される。」というものなのですが、実行してみてもデータが復元されません。どうしてでしょうか。できればフルのコードも含めて教えていただきたいです。よろしくお願いいたします。〈以下HTML〉
<!DOCTYPE html>
<html>
<head>
<title>アプリ</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<main>
<!-- 入力フォーム -->
<form action="#" id="form">
<textarea type="text" name="content" rows="10" cols="50"></textarea><br>
文字サイズ(px): <input type="text" name="fontsz" size="3" value="20">
<input type="submit" value="表示">
</form>
<!-- 入力結果を出力 -->
<p id="output" style="font-size: 20px; white-space: pre-line;"></p>
<script>
// ページ読み込み時にCookieからデータを復元
window.onload = function () {
let savedInput = getCookie('savedInput');
if (savedInput) {
document.getElementById('output').textContent = savedInput;
}
};
// フォーム送信時に入力データをCookieに保存
document.getElementById('form').onsubmit = function (event) {
event.preventDefault();
let inputForm = document.getElementById('form').content.value;
setCookie('savedInput', inputForm, 365); // 365日間保存
document.getElementById('output').textContent = inputForm.replace(/\n/g, "\n");
};
// Cookieにデータを書き込む関数
function setCookie(c_name, value, expiredays) {
let exdate = new Date();
exdate.setDate(exdate.getDate() + expiredays);
document.cookie = c_name + "=" + escape(value) + ((expiredays == null) ? "" : ";expires=" + exdate.toUTCString());
}
// Cookieからデータを読み取る関数
function getCookie(c_name) {
if (document.cookie.length > 0) {
let c_start = document.cookie.indexOf(c_name + "=");
if (c_start != -1) {
c_start = c_start + c_name.length + 1;
let c_end = document.cookie.indexOf(";", c_start);
if (c_end == -1) c_end = document.cookie.length;
return unescape(document.cookie.substring(c_start, c_end));
}
}
return "";
}
</script>
</main>
</body>
<script>
// submit時にイベント実行をする関数
document.getElementById('form').onsubmit = function (event) {
// 再読み込み防止
event.preventDefault();
// 入力フォームの内容を取得
let inputForm = document.getElementById('form').content.value;
let fontsize = document.getElementById('form').fontsz.value;
document.getElementById('output').style.fontSize = fontsize + 'px';
// 入力内容を出力
document.getElementById("output").textContent = inputForm.replace(/\n/g, "\n");
}
</script>
</html>
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS HTMLでstyleを指定するフォームの作り方 2 2023/12/22 19:33
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
- HTML・CSS ボタンをクリックした時に、入力フォームのすぐ下部に、「入力欄が空白です」というテキストメッセージが表 1 2022/04/27 16:25
- JavaScript HTMLとJavaScriptで作ったタイマーアプリが正常に動作しない 7 2023/12/15 19:32
- PHP PHPのエラーの解消法について教えて下さい。 1 2023/02/06 10:48
- PHP PHPでCookieを使った訪問回数について 1 2023/05/28 14:10
- PHP 入力した部分を表示させたまま(保持)するにはどうすれば良いでしょうか? 1 2023/01/25 11:14
- JavaScript ①入力フォーム→②確認表示画面→③送信完了画面のコードを書いているのです、 入力フォームから受け取っ 2 2022/05/10 16:45
- JavaScript HTMLとJavaScriptで作ったタイマーアプリで時間分の設定方法がわからない 2 2023/12/18 18:12
- JavaScript sessionStorageを調べています。 1 2023/06/20 12:41
このQ&Aを見た人はこんなQ&Aも見ています
-
プロが教える店舗&オフィスのセキュリティ対策術
中・小規模の店舗やオフィスのセキュリティセキュリティ対策について、プロにどう対策すべきか 何を注意すべきかを教えていただきました!
-
HTMLでstyleを指定するフォームの作り方
HTML・CSS
-
JavaScriptで作ったアプリが正常に動作しない。改善したい。
JavaScript
-
disabled プロパティが表示されない原因が分からない
JavaScript
-
-
4
HTML電卓で1文字消す方法
HTML・CSS
-
5
htmlの修正方法を教えていただきたいです。
HTML・CSS
-
6
[初心者]javascriptのfor文でなぜか繰り返し処理をしない。理由がわかりません。
JavaScript
-
7
ボタンが押されたらWebページの文字コードを 変える、というプログラミングを書きたいです。 目的は文
HTML・CSS
-
8
PythonのTkinter詳しい方へ。画像や言葉の意味を答える3択クイズを作るのに手間取っています
その他(プログラミング・Web制作)
-
9
コードレビューをお願いします。
JavaScript
-
10
HTMLとJavaScriptで作ったタイマーアプリで時間分の設定方法がわからない
JavaScript
-
11
プログラミング言語の制作方法について
C言語・C++・C#
-
12
HTMLとJavaScriptで作った表示して検索するWebアプリが正常に動かない
JavaScript
-
13
[再掲]JavaScript|特定URLだった時、特定の要素を変更するコードの書き方を教えて下さい
JavaScript
-
14
HTMLで作った時報アプリが動きません
JavaScript
-
15
ボタンを押したあとに画像を表示させる方法についてアドバイスお願い致します
JavaScript
-
16
Javascriptエラーの原因が分からない
JavaScript
-
17
本を見ながらPHPを勉強している初心者です。 今困っていること。 本番環境とローカル環境の差で困って
MySQL
-
18
ホームページの事でおしえてください
CGI
-
19
WordPressで画面還移なしの掲示板を作成する方法が分かりませんアドバイスお願い致します。
AJAX
-
20
javascriptでbgmを自動再生する方法を教えてください。
JavaScript
関連するカテゴリからQ&Aを探す
おすすめ情報
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
javascriptでASPにデータを渡す
-
enterキーでのtab移動
-
onclickでリストボックスを複数...
-
focus()が上手くいかない
-
POST時に要素を削除してからPOST
-
FormのonsubmitでJavaスクリプ...
-
ページを再読み込み後、再読み...
-
複数のフォームを一括で自動送...
-
1つのformで複数のactionをボタ...
-
タブキーでなくエンターキーで...
-
1つのform内に2つのsubmitボタ...
-
Cookieに保存されない
-
指定したタグを書き換えるには?
-
javascriptで取得した値をテキ...
-
どうしてもうまく動作しません!!
-
return trueとreturn falseの用...
-
プルダウン 項目が多いので先頭...
-
submitボタン押下時にPOSTされ...
-
onchangeイベントを強制的に発...
-
大文字か小文字かを判断する方法
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
submitした値を返したい
-
複数のフォームを一括で自動送...
-
iframe内のformをサブミットす...
-
別ウィンドウへのsubmitの挙動...
-
1つのページにformを2つ設置。2...
-
フォームが空欄の時にフォーム...
-
javascriptでASPにデータを渡す
-
Cookieに保存されない
-
POST時に要素を削除してからPOST
-
focus()が上手くいかない
-
submitボタン押下後、disabled...
-
1つのform内に2つのsubmitボタ...
-
FormのonsubmitでJavaスクリプ...
-
テキストエリアに入力したURLに...
-
C# 配列などの受け渡し
-
タブキーでなくエンターキーで...
-
ENTERキーを無効にしたいのです...
-
formのsubmitイベントの発生に...
-
別窓ウィンドウから親ウィンド...
-
1つのformで複数のactionをボタ...
おすすめ情報
<script>
// ページ読み込み時にCookieからデータを復元
window.onload = function () {
let savedInput = getCookie('savedInput');
if (savedInput) {
document.getElementById('output').textContent = savedInput;
}
};
// フォーム送信時に入力データをCookieに保存
(文字数オーバーなので続く)
このように修正したのですが、改善しません。どうしてでしょうか。教えていただきたいです。
document.getElementById('form').onsubmit = function (event) {
event.preventDefault();
let inputForm = document.getElementById('form').content.value;
let fontsize = document.getElementById('form').fontsz.value;
document.getElementById('output').style.fontSize = fontsize + 'px';
(文字数オーバーなので続く)
document.getElementById('output').textContent = inputForm.replace(/\n/g, "\n");
setCookie('savedInput', inputForm, 365); // 365日間保存
};
// Cookieにデータを書き込む関数
function setCookie(c_name, value, expiredays) {
let exdate = new Date();
exdate.setDate(exdate.getDate() + expiredays);
(文字数オーバーなので続く)
document.cookie = c_name + "=" + escape(value) + ((expiredays == null) ? "" : ";expires=" + exdate.toUTCString());
}
// Cookieからデータを読み取る関数
function getCookie(c_name) {
if (document.cookie.length > 0) {
let c_start = document.cookie.indexOf(c_name + "=");
if (c_start != -1) {
(文字数オーバーなので続く)
c_start = c_start + c_name.length + 1;
let c_end = document.cookie.indexOf(";", c_start);
if (c_end == -1) c_end = document.cookie.length;
return unescape(document.cookie.substring(c_start, c_end));
}
}
return "";
}
</script>