●やりたいこと
ボタンがクリックするたびに
vstitle01、02と数値を増やしていき、
違う名前でクッキーに保存させたい。

①クッキーの値を取得し、保存
②複数のtitleの内容を記憶する←×
③titleの内容を表示する

②の複数のtitleの内容を記憶する
箇所が上手く動きません。

すいませんが、ご教授ください。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="Shift_JIS">
    <title>タイトル</title>
<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;
        }
     // ②クッキーに値がセットされていれば値を表示
     function Title() {
            if (getCookie('vstitle')) {
                var vstitle = getCookie('vstitle');
                $("strong.visit").text(vstitle);
      }
			 if (getCookie('vstitle2') !=="") {
                var vstitle2 = getCookie('vstitle2');
        　　    $("strong.visit").text(vstitle2);
            }
			else{}
        }
// ①複数のtitleの内容を記憶する

function TitleWrite() {
var wrtName = document.getElementsByClassName('title');
var vs = wrtName[0].textContent;
setCookie('vstitle', vs, 7);

var vs1 = wrtName[1].textContent;
setCookie('vstitle', vs1, 7);
}  
</script>

</head>
<body>
<h2 class="title">titleを記録</h2>
<ul><strong class="visit"></strong></ul>
<button id="setButton" onclick="TitleWrite();">保存</button>
</body>
</html>

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

回答1件

ベストアンサー

「上手く動きません。」というのはどのような現象が起きるのでしょうか？

というのも気になる点ではありますが、前提として
**「idはページ内に1つのみ」**というのがHTML上のルールです。
同名を複数入れたいのであればclassにした上でgetElementsByClassName()を利用してください。

保存部分のサンプル

javascript
1    function TitleWrite() {
2        var vstitle = document.getElementsByClassName('title');
3        for( var i = 0; i < vstitle.length; i++ ) {
4	        setCookie('vstitle'+(i+1),  vstitle[i].textContent, 7);
5        }
6		window.alert('保存しました'); // 警告ダイアログを表示
7	}

投稿2017/11/16 03:00

編集2017/11/16 04:54

m.ts10806

総合スコア80850

退会済みユーザー

2017/11/16 03:07

ありがとうございます。ソースを修正しております。 1番上のタイトル箇所は表記されるのですが、他の02.03がでてきません。

m.ts10806

2017/11/16 04:15 編集

getElementsByClassName()の解説を調べてもらえれば分かりますが、取得できるのはあくまで「対応したクラスのオブジェクト全てが配列で取得」となりますので、HTML上一番上にあるものを0番目とした番号を指定しないといけません。おそらく未指定の場合は0固定だったはずなので1番上のタイトルのみが取得されます。一度受けた上で、番号で受け取ると良いでしょう。 var e = document.getElementsByClassName('title'); vstitle = e[n].textContent;

退会済みユーザー

2017/11/16 04:21

ありがとうございます。入れてみたところ、 n is not defined とエラーとなります。

m.ts10806

2017/11/16 04:25

nは例のための変数です。実際に利用する際は番号を入れてください。

退会済みユーザー

2017/11/16 04:36

ありがとうございます。下記のソースに変更したところ、 wrtName[1] is undefinedとエラーと表示されてしまいます。 function TitleWrite() { var wrtName = document.getElementsByClassName('title'); var vs = wrtName[0].textContent; setCookie('vstitle', vs, 7); var vs1 = wrtName[1].textContent; setCookie('vstitle', vs1, 7); }

m.ts10806

2017/11/16 04:38

今、ソースどうなってますか？あと、ちょこちょこ全角空白が入っているようですが、問題ないでしょうか。

m.ts10806

2017/11/16 04:40

そもそも「n is not defined」は「cond[n]();」のところで出ているような。

m.ts10806

2017/11/16 04:44

これって「ボタンクリックで全てのタイトルを保存して、画面表示時にクッキーに情報があったら表示する」ですよね。cond[]という配列はあまり意味がないように思いますが・・・。

退会済みユーザー

2017/11/16 04:52

ご指摘ありがとうございます。ソースを修正しております。

m.ts10806

2017/11/16 04:56 編集

ひとまずTitleWrite()を私なりに改修してみました。参考にしてください。 setcookie()には想定通りh2のtextContentの値がそれぞれ渡ってきているのを確認しています。が、元もとのsetcookie()の作りから、おそらくcookie内容を上書きし続けてtitle03しか残らないように思います。

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