Cookie在JavaScript中返回未定义的值

时间:2013-05-10 08:34:33

标签: javascript cookies

我想制作一个cookie来记住用户可以选择的半径。问题是cookie工作,但cookie的值是未定义的。我不知道我做错了什么。

“opslaan”功能与HTML页面上的按钮相关联。

function opslaan()
{
    createCookie('radius',document.getElementById("range").value,8);
    alert("opgeslagen");
}

function readCookie(name)
{
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
    for(var i=0; i < ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0)==' ')
            c = c.substring(1,c.length);
        if (c.indexOf(nameEQ) == 0)
            return c.substring(nameEQ.length,c.length);
    }
    return null;
}

function createCookie(name,value,days) {
    if (days) {
        var date = new Date();
        date.setTime(date.getTime() + (days*24*60*60*1000));
        var expires = ";expires=" + date.toGMTString();
    }
    else
        var expires = "";
    document.cookie = name + "=" + value + expires +";path=/";
}

这是需要获取值的按钮和范围字段:

<fieldset class="one-third column">
    <label for="">Radius van de kaart (km)</label>
    <input type="range"
           min="5"
           max="20"
           value="5"
           step="5"
           onchange="showValue(this.value)" />
    <span id="range">5</span>
    <script type="text/javascript">
        function showValue(newValue)
        {
            document.getElementById("range").innerHTML=newValue;
        }
    </script>
</fieldset>
<script>
    alert(readCookie('radius'));
</script>

<div class="one-third column">
    <a class="full-width button margin-top25"
       href="home.html" 
       onclick="opslaan()">
        Opslaan
    </a>
</div>

似乎没有范围字段和按钮。

2 个答案:

答案 0 :(得分:0)

document.getElementById("range").value将返回undefined。这是你的问题。尝试使用document.getElementById("range").innerHTML

答案 1 :(得分:0)

在您的情况下,rangespan而不是输入元素,因此您需要使用innerHTML属性来读取该元素的内容,而不是使用value

使用

document.getElementById("range").innerHTML

而不是

document.getElementById("range").value

例如:

function opslaan()
{
    createCookie('radius',document.getElementById("range").innerHTML,8);
}

演示:Fiddle