cookieの値をh2内の内容を記録させる
- 評価
- クリップ 1
- VIEW 1,162

退会済みユーザー
クッキーの値を取得 、保存後に
①保存ボタンを押した後に
クッキーに#titleの内容をセットする
②保存したものが、
あったら、visitに表示させる。
この設定をしたのですが、
保存ボタンを押しても
cookieの値に
undefinedと表示されてしまいます。
なぜ、#titleの内容が入らないのでしょうか。
教えて頂けると助かります。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<script type="text/JavaScript" src="js/jquery.js"></script>
<script type="text/JavaScript">
// クッキーの値を取得 getCookie(クッキー名); //
function getCookie(c_name){
var st="";
var ed="";
if(document.cookie.length>0){
// クッキーの値を取り出す
st=document.cookie.indexOf(c_name + "=");
if(st!=-1){
st=st+c_name.length+1;
ed=document.cookie.indexOf(";",st);
if(ed==-1) ed=document.cookie.length;
// 値をデコードして返す
return unescape(document.cookie.substring(st,ed));
}
}
return "";
}
// クッキー保存 setCookie(クッキー名, クッキーの値, クッキーの有効日数); //
function setCookie(c_name,value,expiredays){
// pathの指定
var path = location.pathname;
// pathをフォルダ毎に指定する場合のIE対策
var paths = new Array();
paths = path.split("/");
if(paths[paths.length-1] != ""){
paths[paths.length-1] = "";
path = paths.join("/");
}
// 有効期限の日付
var extime = new Date().getTime();
var cltime = new Date(extime + (60*60*24*1000*expiredays));
var exdate = cltime.toUTCString();
// クッキーに保存する文字列を生成
var s="";
s += c_name +"="+ escape(value);// 値はエンコードしておく
s += "; path="+ path;
if(expiredays){
s += "; expires=" +exdate+"; ";
}else{
s += "; ";
}
// クッキーに保存
document.cookie=s;
}
// サンプル4 ////////////////////////////////////////////////////////////////
// ②titleの内容を表示する
function Title(){
if(getCookie('vstitle')){
var vstitle = getCookie('vstitle');
$("strong.visitor").text(vstitle);
}
}
// ①titleの内容を記憶する
function TitleWrite(){
var wrtName = document.getElementById('title').value;
setCookie('vstitle',wrtName,2);
Title();
}
$(function() {
Title();
});
</script>
</head>
<body>
<h2 id="title">titleを記録する</h2>
<p><strong class="visit"></strong></p>
<button onclick="javascript:TitleWrite()">保存</button>
</body>
</html>
-
気になる質問をクリップする
クリップした質問は、後からいつでもマイページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
クリップを取り消します
-
良い質問の評価を上げる
以下のような質問は評価を上げましょう
- 質問内容が明確
- 自分も答えを知りたい
- 質問者以外のユーザにも役立つ
評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。
質問の評価を上げたことを取り消します
-
評価を下げられる数の上限に達しました
評価を下げることができません
- 1日5回まで評価を下げられます
- 1日に1ユーザに対して2回まで評価を下げられます
質問の評価を下げる
teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。
- プログラミングに関係のない質問
- やってほしいことだけを記載した丸投げの質問
- 問題・課題が含まれていない質問
- 意図的に内容が抹消された質問
- 過去に投稿した質問と同じ内容の質問
- 広告と受け取られるような投稿
評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。
質問の評価を下げたことを取り消します
この機能は開放されていません
評価を下げる条件を満たしてません
質問の評価を下げる機能の利用条件
この機能を利用するためには、以下の事項を行う必要があります。
- 質問回答など一定の行動
-
メールアドレスの認証
メールアドレスの認証
-
質問評価に関するヘルプページの閲覧
質問評価に関するヘルプページの閲覧
checkベストアンサー
+3
以下の項目を修正することで質問者さんが想像する動作になるかと思います。
h2要素
にvalue属性
を設定することはできません(undefined
になるのはこのため)。- クラス名は
visitor
ではなく、visit
に設定されています(h2要素
の内容がstrong要素
に反映されないのはこれが原因)。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>タイトル</title>
<script type="text/JavaScript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/JavaScript">
"use strict";
// クッキーの値を取得 getCookie(クッキー名); //
function getCookie(c_name) {
var st = "";
var ed = "";
if (document.cookie.length > 0) {
// クッキーの値を取り出す
st = document.cookie.indexOf(c_name + "=");
if (st != -1) {
st = st + c_name.length + 1;
ed = document.cookie.indexOf(";", st);
if (ed == -1) ed = document.cookie.length;
// 値をデコードして返す
return unescape(document.cookie.substring(st, ed));
}
}
return "";
}
// クッキー保存 setCookie(クッキー名, クッキーの値, クッキーの有効日数); //
function setCookie(c_name, value, expiredays) {
// pathの指定
var path = location.pathname;
// pathをフォルダ毎に指定する場合のIE対策
var paths = [];
paths = path.split("/");
if (paths[paths.length - 1] != "") {
paths[paths.length - 1] = "";
path = paths.join("/");
}
// 有効期限の日付
var extime = new Date().getTime();
var cltime = new Date(extime + (60 * 60 * 24 * 1000 * expiredays));
var exdate = cltime.toUTCString();
// クッキーに保存する文字列を生成
var s = "";
s += c_name + "=" + escape(value);// 値はエンコードしておく
s += "; path=" + path;
if (expiredays) {
s += "; expires=" + exdate + "; ";
} else {
s += "; ";
}
// クッキーに保存
document.cookie = s;
}
// サンプル4 ////////////////////////////////////////////////////////////////
// ②titleの内容を表示する
function Title() {
if (getCookie('vstitle')) {
var vstitle = getCookie('vstitle');
$("strong.visit").text(vstitle);
}
}
// ①titleの内容を記憶する
function TitleWrite() {
var wrtName = document.getElementById('title').textContent;
setCookie('vstitle', wrtName, 2);
Title();
}
$(function () {
Title();
});
</script>
</head>
<body>
<h2 id="title">titleを記録する</h2>
<p><strong class="visit"></strong></p>
<button onclick="TitleWrite();">保存</button>
</body>
</html>
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
15分調べてもわからないことは、teratailで質問しよう!
- ただいまの回答率 88.10%
- 質問をまとめることで、思考を整理して素早く解決
- テンプレート機能で、簡単に質問をまとめられる