cookieの値をリセットしたい

Question

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

---

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=;";
など試しましたがルーレットが動作しないといった事象が起こりました。
お手柔らかにお願い致します。

Comments

[m.ts10806]

質問編集画面タイトル横にある「初心者アイコン」をご活用ください。「初心者」と質問で書くよりも伝わりますし、質問一覧に表示されるのでわかりやすくなります。また、「cookieをリセットする方法」は探して、試してみましたか？https://teratail.com/help/question-tips#questionTips1-2

[退会済みユーザー]

mts10806様 回答ありがとうございます。勇み足で質問してしまい申し訳ございません。調べて試してはいるのですが納得できるものがなく、困って本サイトを使用させていただきました。ご親切に質問の方法など教えてくださり誠にありがとうございます。

[m.ts10806]

納得できるかどうかは別にして「ここは見てみました」という参考先の提示は必要です。そのサイトが適切かどうか、理解が合っているかどうかは回答者が見てみないと分かりません。提示のコードだと「やってみた」後が見えないので回答もつきにくいと思います。

[退会済みユーザー]

かしこまりました。この質問は締め切り改めて用意してから出直します。ありがとうございます！

[m.ts10806]

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

[退会済みユーザー]

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

[m.ts10806]

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

Answer 1

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

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

Comments

[退会済みユーザー]

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

[退会済みユーザー]

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