Javascript变量等于文本框值

时间:2013-10-07 13:06:37

标签: javascript variables textbox

当我尝试将pop_size变量传递给文本框的值时,我遇到了问题。此变量将在脚本中与textbox的值一起使用。当我点击按钮时,值会更改并更新变量值,然后重新加载页面,变量将设置为文本框中的值。

<form name="myform1" action="" method="get"> 
    Input the number of populations<br />
    <input type="number" name="pop" id="pop" value=5 /><br />
    <input type="button" name="b1" id="b1" value="Click to set" 
           onClick="setValue()" /><br /> 
</form>  

function setValue() { 
    var test, test1;
    test=parseInt(document.getElementById('pop').value);
    pop_size = test;
} 

1 个答案:

答案 0 :(得分:0)

如果我正确地理解你,那么你有一个变量集可以正常工作,直到你重新加载,然后迷路。

我知道有两种基本策略可以使变量在页面重新加载后继续存在。

我列出的第一个似乎更复杂。我会告诉你它的基础知识,如果你需要可以告诉你更多。获得该值后,将其附加到查询字符串中的网页地址。它会像window.location += "?pop_size=" + pop_size;那样但是有许多固有的困难:你必须有一个脚本来检查查询字符串并从中提取pop_size,你应该替换任何现有的pop_size在更新它时在查询字符串中。它可以工作,你可以找到很多讨论查询字符串和javascript的网页,但有更简单的方法。

如果您使用的是HTML5,更简单的解决方案就是使用sessionStorage。它目前是supported in all major browsers,但我提供的第一个链接(到MDN)为您提供了一个可以向后兼容的polyfill。它允许您在浏览器上存储变量,直到用户关闭浏览器窗口为止。

要保存该值,MDN建议您执行以下操作:

sessionStorage.setItem("pop_size", pop_size);

并使用以下命令检索pageLoad上的值:

document.getElementById('pop').value = sessionStorage.getItem("pop_size") || 5;  // if it's not found, default back to 5.

老实说,我从未见过这种语法,我不确定为什么MDN会推荐它。 sessionStorage对象的标准用法更加容易:

sessionStorage.pop_size = pop_size;
...
document.getElementById('pop').value = sessionStorage.pop_size || 5; // if it's not found, default back to 5.