動態創建的範圍形式，只有最後一個範圍工作，爲什麼？

我試圖動態生成一些範圍形式最近，但我被困在這些，只有最後一個範圍確實工作，即使他們有不同的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>

來源

2016-12-16 Gemelo Molinero

陣... ...對象數組......你真正想要什麼樣的對象'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>

來源

2016-12-16 12:49:02 RajSan

謝謝，那個工程。我已經有了Rangenum引起麻煩的感覺，但我不知道爲什麼。無論如何，謝謝...節省了我更多的時間;-) –

對您的解決方案進行了一些小改動，使其適用於超過9個範圍的輸入：var idval = document.activeElement.id.slice（1，document.activeElement.id 。長度） –

動態創建的範圍形式，只有最後一個範圍工作，爲什麼？

回答

相關問題