动态创建范围形式,只有最后一个范围有效,为什么?

时间:2016-12-16 11:35:52

标签: javascript range

我最近试图动态生成一些范围形式但是我被困在这些,只有最后一个范围确实有效,即使它们有不同的id。这是为什么 ?我认为它不像我的全局范围变量,但为什么呢?

 <!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
</head>
<body>
<script>

var rangenum = 0;
var rangediv = new Array();
var rangeform = new Array();


var range = {};
range['position'] = {
  controls : [{   pos: "parent",
                  inc: 1,
                  out: "oX",
                   id: "x",
                label: 35,
                  vis: "block",
                 step: 0.1,
                  min: -100,
                  max: 100,
                  def: 0 },
              {   pos: "parent",
                  inc: 1,
                  out: "oY",
                   id: "y",
                label: 36,
                  vis: "block",
                 step: 0.1,
                  min: -100,
                  max: 100,
                  def: 0 }
             ]
}

 function rangebox(obj) {

       prnt = document.getElementById(obj.pos);
       rangenum++;


       rangediv[obj.id] = document.createElement("DIV");

       rangediv[obj.id].id='div_'+obj.id;
       rangeform[obj.id] = document.createElement("FORM");

       rangeform[obj.id].oninput= function() {
         input=document.getElementById('i'+rangenum).value;
         document.getElementById('o'+rangenum).value=input;
         console.log(input);
        }

          rangeoutput = document.createElement("OUTPUT");
          rangeoutput.id = 'o'+rangenum;
          rangeoutput.value = obj.def;
          rangeoutput.innerHTML=obj.def;

          rangeinput = document.createElement("INPUT");
          rangeinput.type='range';
          rangeinput.step=obj.step;
          rangeinput.min=obj.min;
          rangeinput.max=obj.max;
          rangeinput.value=obj.def;
          rangeinput.id = 'i'+rangenum;
          rangeinput.innerHTML=obj.def;

       prnt.appendChild(rangediv[obj.id]);



       rangediv[obj.id].appendChild(rangeform[obj.id]);
       rangeform[obj.id].appendChild(rangeoutput);
       rangeform[obj.id].appendChild(rangeinput);
 }

 function getrange () {
 i=0;
   while (range['position'].controls[i]) {
     rangebox(range['position'].controls[i]);
     i++;
   }
 }




</script>

<div id="parent"></div>


<a href="javascript:void(0);" onClick="getrange()">get range</a>


</body>
</html>

1 个答案:

答案 0 :(得分:1)

在您的代码中 rangenum 是问题, 试试这个

    [HttpGet]
    public HttpResponseMessage Get()
    {
       var fs = new FileStream(myfileInfo.FullName, FileMode.Open, FileAccess.Read, 
                                FileShare.Read, 32768, true);
            var response = this.Request.CreateResponse();
            response.Content = new StreamContent(fs);
            response.Content.Headers.ContentDisposition = new ContentDispositionHeaderValue("attachment");
            response.Content.Headers.ContentType = new MediaTypeHeaderValue("application/octet-stream");
            response.Content.Headers.ContentLength = fs.Length;
            fs.Dispose();
            return response;
    }