从文本框中检索值并传递给 js答案

【问题标题】：retrieve value from textbox and pass to js从文本框中检索值并传递给 js
【发布时间】：2013-11-26 09:30:33
【问题描述】：

我正在绘制 d3 图表，代码工作正常。但是要更改编号。在我的情况下为 100 的输入点，我必须将它们更改为等于文本框值的值。但是这样做时，我必须使用 location.reload()，并使用它丢失了选定的值。有人可以帮我吗. 代码如下：

html 文件

<script type="text/javascript" src="d3.v3.min.js"></script>

<script>
function update7()
{
var number=document.getElementById("number");
document.getElementById("nd").value=number.options[number.selectedIndex].text;

}
</script>


<style type="text/css">
.axis path,.axis line
{
fill:none;
stroke:black;
shape-rendering:crispEdges;
}

.axis text
{
font-family:sans-serif;
font-size:11px;
}
</style> 


<script type="text/javascript">

var w=800;
 var h=600;
var padding=30;

var dataset=new Array();
var currentdate;
var sec;
var x1;
var y1;







for(var i=0;i<100;i++)//here i have to set the value of textbox instead of 100 
{

 currentdate=new Date();
 sec=currentdate.getSeconds();
sec=+sec;
 x1=Math.floor((Math.random()*100*sec)+10);
x1=+x1;

y1=Math.floor((Math.random()*(100+sec)));
y1=+y1;
dataset.push([x1,y1]);

}

</script>

</head>

<body>
<h1 id="fps" ></h1>
<form>

Select number of data-points:
<select id="number" onchange="update7()">
<option></option>
<option>100</option>
<option>1000</option>
<option>4000</option>
<option>10000</option>
<option>40000</option>
</select>

<input type="text" id="nd" size="20" value="10" >

</form>





</body>


</html>

src.js

window.onload = function () {
//var tb=document.getElementById("nd");
//tb.setAttribute("onchange",function(){init(tb.value);setupFunc();});

setupFunc(); }

var svg;
var xScale;
var yScale;
var rscale;
var xAxis;
var yAxis;

var filterStrength = 20;
var frameTime, lastLoop , thisLoop;





function GetFeed(){



 svg.selectAll("circle").data(dataset).transition().duration(1000).each("start",function()  {d3.select(this).attr("fill","magenta").attr("r",3);}).attr("cx",function(d){return   xScale(d[0]);}).attr("cy",function(d){return yScale(d[1]);})  

.each("end",function(){d3.select(this).attr("fill","black").attr("r",2);});


var thisFrameTime = (thisLoop=new Date) - lastLoop;
  frameTime+= (thisFrameTime - frameTime) / filterStrength;
  lastLoop = thisLoop;
 var fpsOut = document.getElementById('fps');
  fpsOut.innerHTML = "Frame rate: "+(1000/frameTime).toFixed(1) + " fps";




}                      

function setupFunc() {

frameTime = 0;

 xScale=d3.scale.linear().domain([0,d3.max(dataset,function(d){return  d[0];})]).range([padding,w-padding*2]);

 yScale=d3.scale.linear().domain([0,d3.max(dataset,function(d){return d[1];})]).range([h- padding,padding]);

 rscale=d3.scale.linear().domain([0,d3.max(dataset,function(d){return   d[1];})]).range([2,5]);

 svg=d3.select("body").append("svg").attr("width",w).attr("height",h);

svg.selectAll("circle").data(dataset).enter().append("circle").attr("cx",function(d){return   xScale(d[0]);}).attr("cy",function(d){return yScale(d[1]);}).attr("r",function(d){return   rscale(d[1]);}).append("title").text(function(d){return "x: "+d[0]+" y: "+d[1];});

 xAxis=d3.svg.axis().scale(xScale).orient("bottom").ticks(5);
 yAxis=d3.svg.axis().scale(yScale).orient("left").ticks(5);



svg.append("g").attr("class","X axis").attr("transform","translate(0,"+(h- padding)+")").call(xAxis)

svg.append("g").attr("class","Y      axis").attr("transform","translate("+padding+",0)").call(yAxis);



lastLoop= new Date;  
GetFeed();
setInterval("GetFeed()",7000);


}

【问题讨论】：

请创建 jsFiddle 测试用例。

标签： javascript jquery d3.js

【解决方案1】：

使用localStorage() 或cookies 显示您的selected data 赞，

newValue=number.options[number.selectedIndex].text;
document.getElementById("nd").value=newValue;
localStorage.setItem("newValue", newValue);// to set new value

要获得newValue，试试这个，

newValue=localStorage.getItem('newValue');

【讨论】：

我使用了 sessionStorage 而不是 localStorage，以便在关闭浏览器时清除缓存。非常感谢