动态创建的范围形式，只有最后一个范围工作，为什么？

问题描述：

我试图动态生成一些范围形式最近，但我被困在这些，只有最后一个范围确实工作，即使他们有不同的id。这是为什么？我认为它不喜欢我的全球Rangenum变量，但为什么？动态创建的范围形式，只有最后一个范围工作，为什么？

<!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>

阵... ...对象数组......你真正想要什么样的对象'rangediv'和' rangeform'是？ – Teemu

答

在你的代码rangenum的问题，试试这个

<!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() { 
     console.log(document.activeElement.id.slice(1,2)); 
     var idval=document.activeElement.id.slice(1,2)  
     input=document.getElementById('i'+idval).value; 
     document.getElementById('o'+idval).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>

谢谢，那个工程。我已经有了Rangenum引起麻烦的感觉，但我不知道为什么。无论如何，谢谢...节省了我更多的时间;-) –

对您的解决方案进行了一些小改动，使其适用于超过9个范围的输入：var idval = document.activeElement.id.slice（1，document.activeElement.id 。长度） –

动态创建的范围形式，只有最后一个范围工作，为什么？

相关推荐