質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.75%

  • JavaScript

    15275questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

cookieの値をリセットしたい

受付中

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 129
退会済みユーザー

退会済みユーザー

Javascript 初級者です。現在ルーレットを作成しておりまして、cookieに結果をセットしてルーレットのマス全てに一回ずつ止まるといった物を学びながら作成しております。
そこでわからない点があったので質問させていただきます。


変数saved_resultにはcookieの値が'123'と文字列が入っています。
希望は'1234'にならないように、ここでcookieの値をリセットして再度文字列の中を空にしたいです。
分岐を作りここで文字列が4になればcookieの中身をリセットしたいのですがロジックで悩み手が止まってしまいます。
ご教授の程宜しくお願い致します。

    if(saved_result.length === 3){
         setCookie("result", String(result) + String(saved_result));
    }


以下jsの中身です。

var leftover = 3; //ルーレットの残回数
var result = 0;
var rCurrent = 0;
var rCount = 0;
var waitTimer = 500;
var isStopClick = false;
var isStop = false;
var isIE6 = false;
var isIE7 = false;
var userAgent = window.navigator.userAgent.toLowerCase();
var appVersion = window.navigator.appVersion.toLowerCase();

function getLeftOver() {
    var cookieName = 'leftover';
    var leftover = getCookie(cookieName);

    if(leftover === undefined){
        leftover = 3;
    }
    return leftover;
}

function getResultFromCookie(){
    var cookieName = 'result';
    var stoppedResult = getCookie(cookieName);

    if (stoppedResult === undefined) {
        stoppedResult = '';
    }
    return stoppedResult;
}

function getCookie(cookieName){
    var allcookies = document.cookie;
    var position = allcookies.indexOf(cookieName);
    var result = undefined;

    if(position !== -1){

        var startIndex = position + cookieName.length;
        var endIndex = allcookies.indexOf( ';', startIndex );

        if (endIndex === -1){
            endIndex = allcookies.length;
        }

        result = allcookies.substring(startIndex + 1, endIndex);
    }

    return result;
}

function setLeftOver(leftover){

    if(Number.isNaN(leftover) || (leftover < 1  || leftover > 3)){
        leftover = 3;
    }
    setCookie("leftover", leftover);
}

/**
ルーレットで止まった結果をcookieに保存する関数
*/
function setResultToCookie(result){

    // 登録されているマスを取得
    var saved_result = getResultFromCookie();
    setCookie("result", String(result) + String(saved_result));  
}

function setCookie(cookieName, cookieValue){
    // var position = allcookies.indexOf(cookieName);

    document.cookie = cookieName + "=" + cookieValue;
}

function startRoulette() {
    $("#r0").hide();
    $("#rouleteStart").fadeOut("fast");
    $("#rouleteStop").delay(500).fadeIn("fast");

    // 既に止まったマスを取得
    var saved_result = getResultFromCookie();

    if(saved_result.length === 3){
         setCookie("result", String(result) + String(saved_result));
    }

    // ↓止まるマスを決めている
    result = Math.floor(Math.random() * 3 + 1);

    /*
    Ex)
    saved_result : '31'
    result : '1'

    var index = saved_result.indexOf(result);

    while(index !== -1){

        if(saved_result === ''){
            break;
        }
        result = Math.floor(Math.random() * 3 + 1);
        index = saved_result.indexOf(result);


        // console.log('index : ' + index);
        // console.log('result : ' + result);
        // console.log('saved_result : ' + saved_result);
    }

    rotateRoulette();

}

function rotateRoulette() {
    rCurrent = Math.floor(Math.random() * 3) + 1;
    changeNextPanel();
    $("#rouleteStop").click(stopRoulette);
}

function changeNextPanel() {
    rCurrent++;
    if (rCurrent > 3){
        rCurrent = 1;
    }

    for (var i = 1; i < 4; i++) {
        if (i == rCurrent) {
            $("#r" + i).show();
        } else {
            $("#r" + i).hide();
        }
    }
    rCount++;
    if (!isStopClick) {
        if (rCount <= 3) {
            // none
        } else if (rCount <= 4) {
            waitTimer = 200;
        } else if (rCount <= 6) {
            waitTimer = 150;
        } else if (rCount <= 7) {
            waitTimer = 120;
        } else {
            waitTimer = 90;
        }
    } else {
        if (rCount <= 1) {
            // none
        } else if (rCount <= 2) {
            waitTimer = 120;
        } else if (rCount <= 3) {
            waitTimer = 150;
        } else if (rCount <= 4) {
            waitTimer = 190;
        } else if (rCount <= 5) {
            waitTimer = 230;
        } else if (rCount <= 6) {
            waitTimer = 300;
        } else if (rCount <= 7) {
            waitTimer = 600;
        } else {
            if (rCurrent === result) {
                isStop = true;
            }
        }
    }

    if (!isStop) {
        $.wait(waitTimer).done(changeNextPanel);
    } else {
        blinkPanel();
    }
}

function stopRoulette() {
    $("#rouleteStop").fadeOut("fast");
    isStopClick = true;
    rCount = 0;
}

function blinkPanel() {
    $("#r0").delay(600).fadeIn(0).delay(200).fadeOut(0).delay(200).fadeIn(0).delay(200).fadeOut(0).delay(200).fadeIn(0).delay(200).fadeOut(0);
    $.wait(2e3).done(showResult);
}

function showResult() {
    var e = "";
    var leftOver = 0;

    switch (result) {
    case 1: // 大吉
        e = "red";
        break;
    case 2: // 中吉
        e = "blue";
        break;
    case 3: // 凶
        e = "green";
        break
    }
    $(".result > img").attr("src", "img/result_" + e + ".png");

    // 結果の表示
    leftOver = getLeftOver();
    // id = resultArea の中の class = returnBtn の中の img の src

    leftOver--;
    $("#resultArea > .returnBtn > img").attr("src", "img/btn_return_d" + leftOver + ".png"); // 2 -> 1 -> 0

    // 残回数をセットする
    setLeftOver(leftOver);

    // 止まったマスをcookieにセットする関数を呼ぶ
    setResultToCookie(result);

    $("#resultArea").css({
        visibility: "visible"
    }).animate({
        opacity: "1"
    }, {
        duration: "fast"
    })
}

function backClick() {
    rCount = 0;
    result = 0;
    waitTimer = 500;
    isStop = isStopClick = false;
    $("#resultArea").animate({
        opacity: "0"
    }, {
        duration: "fast",
        complete: function() {
            $(this).css({
                visibility: "hidden"
            })
        }
    });
    $(".result>img").attr("src", "img/blank.png");
    $("#r0").show();
    for (var e = 1; e < 6; e++) {
        $("#r" + e).hide()
    }
    $("#rouleteStart").delay(500).fadeIn();
}


// ページが読み込まれた時に実行される
// $jQuery.document.ready(function){...} ??
$(function() {

    // IE判定
    if (userAgent.indexOf("msie") != -1) {
        if (appVersion.indexOf("msie 6.") != -1) {
            isIE6 = true;
        } else if (appVersion.indexOf("msie 7.") != -1) {
            isIE7 = true;
        }
    }

    $("#rouleteStop").hide();
    for (var e = 1; e < 6; e++) {
        $("#r" + e).hide();
    }
    $(".returnBtn").bind("click", backClick);
    $("#rouleteStart").bind("click", startRoulette);
});

$.wait = function(e) {
    var t = new $.Deferred;
    setTimeout(function() {
        t.resolve(e);
    }, e);
    return t.promise();
}

[cookieクリア]でサイト探しているのですが、思った回答がなくて困っています。
document.cookie = "value=;";
など試しましたがルーレットが動作しないといった事象が起こりました。
お手柔らかにお願い致します。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • mts10806

    2018/05/09 13:31

    意味が分かりません。質問を再編するだけで良いかと思いますが。

    キャンセル

  • 退会済みユーザー

    退会済みユーザー

    2018/05/09 13:33

    あ、編集できるんですね。ありがとうございます。

    キャンセル

  • mts10806

    2018/05/09 13:35

    私の最初の指摘後に修正されてるじゃないですか?(初心者アイコンつけたり)

    キャンセル

回答 1

0

こういうことをしたいのかな?

if(saved_result.length < 3){
     saved_result = String(saved_result) + String(result);
}else{
     saved_result = String(result);
}
setCookie("result", String(saved_result));

※以下追加。

追記されたjsソースを見ましたが、「getCookie」や「setCookie」が正しく動作していないと思います。
Cookieの操作に関しては以下のWebページを参考にしてみてはどうでしょう?

JavaScriptでcookie処理(読み・書き・削除) - Qiita

上の記事内で紹介されている「cookie.js」を使うのも一つの手段です。

cookie.js - GitHub

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/05/09 13:59

    回答ありがとうございます!試しましたが動作しませんでした。

    キャンセル

  • 2018/05/09 15:05

    ありがとうございます!こちらを参考にさせていただきます!!

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.75%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • JavaScript

    15275questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。