从textbox中检索值并传递给js

retrieve value from textbox and pass to js

本文关键字：js textbox 检索      更新时间：2023-10-22

我正在绘制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);

}

使用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');
相关文章：