動的に作成された範囲形式、最後の範囲のみが動作します、なぜですか？

最近私は動的にいくつかのレンジフォームを生成しようとしていますが、私はこれらのことに固執しています。異なるIDを持っていても最後のレンジだけが動作します。何故ですか？私はそれが私のグローバルなrangenum変数を好きではないと思うが、なぜ？あなたのコード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'を試してみて、レンジフォームは？ – Teemu

が問題である、は `この

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

ありがとうございました。私はすでにランジェンが問題を引き起こしているという気持ちがあったが、なぜその理由はわからない。とにかく、ありがとう...もう少し時間を節約します;-) –

9つ以上の範囲の入力に対しては、あなたのソリューションを少し変更してください：var idval = document.activeElement.id.slice（1、document.activeElement.id .length） –

動的に作成された範囲形式、最後の範囲のみが動作します、なぜですか？

答えて

関連する問題