このコードは、「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で質問しましょう!
このQ&Aを見た人はこんなQ&Aも見ています
-
「これはヤバかったな」という遅刻エピソード
寝坊だったり、不測の事態だったり、いずれにしても遅刻の思い出はいつ思い出しても冷や汗をかいてしまいますよね。特にものすごく怒られたときとか、とんでもない損害を与えてしまったときとか…。
-
JavaScriptで作ったアプリが正常に動作しない。改善したい。
JavaScript
-
disabled プロパティが表示されない原因が分からない
JavaScript
-
[再掲]JavaScript|特定URLだった時、特定の要素を変更するコードの書き方を教えて下さい
JavaScript
-
-
4
HTMLとJavaScriptで作った表示して検索するWebアプリが正常に動かない
JavaScript
-
5
HTMLで作った時報アプリが動きません
JavaScript
-
6
ボタンを押したあとに画像を表示させる方法についてアドバイスお願い致します
JavaScript
-
7
Javascriptエラーの原因が分からない
JavaScript
-
8
javaScriptのコードの修正をお願いします。
JavaScript
-
9
HTMLで画像をポップアップで表示するようにする方法
HTML・CSS
-
10
CSV出力を画面から選択したデータ項目のみを出力させたいです。
Java
-
11
入力フォームの空白や改行を制限したい
PHP
-
12
コードを直していただきたいです。 以下のコードはネットで拾ったものをほんの少しいじった物なのですが、
Visual Basic(VBA)
-
13
二次元配列の中の各行の要素をランダムに並べ替えたいです。
JavaScript
-
14
Colorboxがうまく設置できません
JavaScript
-
15
HTMLタグに複数のクラスを設定する方法がわからない
JavaScript
-
16
var exports = exports || {}; ← この意味を教えてください。
JavaScript
-
17
javascriptで質問です。 displayプロパティを使用してテーブルの一部を表示・非表示をし
JavaScript
-
18
PythonやJavaScriptのように実質的に数の桁数を無限に扱える言語と、全く無限に使えない言
JavaScript
-
19
テーブルのセルデータを自動改行させずに、はみ出た部分は切り捨てたい
HTML・CSS
-
20
オススメのプログラミングスクールあればお聞きしたいです。 ・PHPを学べる ・ポートフォリオ作成でき
PHP
関連するカテゴリからQ&Aを探す
おすすめ情報
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
別ウィンドウへのsubmitの挙動...
-
1つのformで複数のactionをボタ...
-
Chromeの document.getElementB...
-
javascriptでASPにデータを渡す
-
タブキーでなくエンターキーで...
-
iframe内のformをサブミットす...
-
FormのonsubmitでJavaスクリプ...
-
formのsubmitイベントの発生に...
-
ファイル選択と同時にアップロ...
-
Firefox:JavaScriptのsubmit
-
submit関数の使い方
-
submitボタンを表示することな...
-
submitした値を返したい
-
<JavaScript>tableタグを入力不...
-
ハイパーリンクを別ウインドウ...
-
onchangeイベントを強制的に発...
-
ページ間で変数を保持したい
-
プルダウン 項目が多いので先頭...
-
Selectボックスの幅を自動で広...
-
innerHTML内では改行は禁止?
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
FormのonsubmitでJavaスクリプ...
-
submitした値を返したい
-
javascriptでASPにデータを渡す
-
別ウィンドウへのsubmitの挙動...
-
フォームが空欄の時にフォーム...
-
複数のフォームを一括で自動送...
-
iframe内のformをサブミットす...
-
1つのform内に2つのsubmitボタ...
-
POST時に要素を削除してからPOST
-
1つのページにformを2つ設置。2...
-
formのsubmitイベントの発生に...
-
focus()が上手くいかない
-
1つのformで複数のactionをボタ...
-
リンク先アドレスの一部にテキ...
-
タブキーでなくエンターキーで...
-
JavascriptからSubmitして画面...
-
同意チェックボックスはひとつ...
-
指定したタグを書き換えるには?
-
javascriptで .jpg , .jpeg , ....
-
chromeでフォームの値が取得で...
おすすめ情報
<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>