cookieの値をh2内の内容を記録させる

クッキーの値を取得、保存後に

①保存ボタンを押した後に
クッキーに#titleの内容をセットする

②保存したものが、
あったら、visitに表示させる。

この設定をしたのですが、
保存ボタンを押しても
cookieの値に
undefinedと表示されてしまいます。

なぜ、#titleの内容が入らないのでしょうか。
教えて頂けると助かります。

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4<meta charset="UTF-8">
5
6<script type="text/JavaScript" src="js/jquery.js"></script>
7<script type="text/JavaScript">
8// クッキーの値を取得 getCookie(クッキー名); //
9function getCookie(c_name){
10	var st="";
11	var ed="";
12	if(document.cookie.length>0){
13		// クッキーの値を取り出す
14		st=document.cookie.indexOf(c_name + "=");
15		if(st!=-1){ 
16			st=st+c_name.length+1;
17			ed=document.cookie.indexOf(";",st);
18			if(ed==-1) ed=document.cookie.length;
19			// 値をデコードして返す
20			return unescape(document.cookie.substring(st,ed));
21		} 
22	}
23	return "";
24}
25
26// クッキー保存　setCookie(クッキー名, クッキーの値, クッキーの有効日数); //
27function setCookie(c_name,value,expiredays){
28	// pathの指定
29	var path = location.pathname;
30	// pathをフォルダ毎に指定する場合のIE対策
31	var paths = new Array();
32	paths = path.split("/");
33	if(paths[paths.length-1] != ""){
34		paths[paths.length-1] = "";
35		path = paths.join("/");
36	}
37	// 有効期限の日付
38	var extime = new Date().getTime();
39	var cltime = new Date(extime + (60*60*24*1000*expiredays));
40	var exdate = cltime.toUTCString();
41	// クッキーに保存する文字列を生成
42	var s="";
43	s += c_name +"="+ escape(value);// 値はエンコードしておく
44	s += "; path="+ path;
45	if(expiredays){
46		s += "; expires=" +exdate+"; ";
47	}else{
48		s += "; ";
49	}
50	// クッキーに保存
51	document.cookie=s;
52}
53
54
55
56// サンプル4 ////////////////////////////////////////////////////////////////
57// ②titleの内容を表示する
58function Title(){
59	if(getCookie('vstitle')){
60		var vstitle = getCookie('vstitle');
61		$("strong.visitor").text(vstitle);
62	}
63}
64
65// ①titleの内容を記憶する
66function TitleWrite(){
67	var wrtName = document.getElementById('title').value;
68	setCookie('vstitle',wrtName,2);
69	Title();
70}
71
72$(function() {
73	Title();
74});
75
76
77</script>
78</head>
79
80<body>
81
82<h2 id="title">titleを記録する</h2>
83<p><strong class="visit"></strong></p>
84<button onclick="javascript:TitleWrite()">保存</button>
85
86
87</body>
88</html>

行動規範の内容に同意します

回答1件

ベストアンサー

以下の項目を修正することで質問者さんが想像する動作になるかと思います。

h2要素にvalue属性を設定することはできません(undefinedになるのはこのため)。
クラス名はvisitorではなく、visitに設定されています(h2要素の内容がstrong要素に反映されないのはこれが原因)。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <title>タイトル</title>
6    <script type="text/JavaScript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
7    <script type="text/JavaScript">
8        "use strict";
9
10        // クッキーの値を取得 getCookie(クッキー名); //
11        function getCookie(c_name) {
12            var st = "";
13            var ed = "";
14            if (document.cookie.length > 0) {
15                // クッキーの値を取り出す
16                st = document.cookie.indexOf(c_name + "=");
17                if (st != -1) {
18                    st = st + c_name.length + 1;
19                    ed = document.cookie.indexOf(";", st);
20                    if (ed == -1) ed = document.cookie.length;
21                    // 値をデコードして返す
22                    return unescape(document.cookie.substring(st, ed));
23                }
24            }
25            return "";
26        }
27
28        // クッキー保存　setCookie(クッキー名, クッキーの値, クッキーの有効日数); //
29        function setCookie(c_name, value, expiredays) {
30            // pathの指定
31            var path = location.pathname;
32            // pathをフォルダ毎に指定する場合のIE対策
33            var paths = [];
34            paths = path.split("/");
35            if (paths[paths.length - 1] != "") {
36                paths[paths.length - 1] = "";
37                path = paths.join("/");
38            }
39            // 有効期限の日付
40            var extime = new Date().getTime();
41            var cltime = new Date(extime + (60 * 60 * 24 * 1000 * expiredays));
42            var exdate = cltime.toUTCString();
43            // クッキーに保存する文字列を生成
44            var s = "";
45            s += c_name + "=" + escape(value);// 値はエンコードしておく
46            s += "; path=" + path;
47            if (expiredays) {
48                s += "; expires=" + exdate + "; ";
49            } else {
50                s += "; ";
51            }
52            // クッキーに保存
53            document.cookie = s;
54        }
55
56
57        // サンプル4 ////////////////////////////////////////////////////////////////
58        // ②titleの内容を表示する
59        function Title() {
60            if (getCookie('vstitle')) {
61                var vstitle = getCookie('vstitle');
62                $("strong.visit").text(vstitle);
63            }
64        }
65
66        // ①titleの内容を記憶する
67        function TitleWrite() {
68            var wrtName = document.getElementById('title').textContent;
69            setCookie('vstitle', wrtName, 2);
70            Title();
71        }
72
73        $(function () {
74            Title();
75        });
76    </script>
77</head>
78<body>
79<h2 id="title">titleを記録する</h2>
80<p><strong class="visit"></strong></p>
81<button onclick="TitleWrite();">保存</button>
82</body>
83</html>