JavaScript 요소에 입력 요소 바인딩하기

Question

HTML <input> 요소를 JavaScript 개체에 바인딩하는 간단한 표기법을 소개하고자합니다. 다음과 같이하십시오 :

<script>    
    var qform = { 
     uid : "", 
     pass : "" 
    }; 
</script> 

<form method="get" action="#"> 
    <input id="temp0" type="text" name="uid" bind="qform.uid" /> 
    <input id="temp1" type="password" name="pass" bind="qform.pass" /> 
    <input type="submit" value="submit" /> 
</form> 

<input>의 변경으로 인해 JS 변수가 변경됩니다. 구현하려는 방식은 다음과 같습니다.

<script> 

    var x = 0; 
    for(x = 0; x < 2; x++) { 

     var inputField = document.getElementById("temp" + x); 


     var bindObj = inputField.getAttribute("bind");    

     var bindObjTree = bindObj.split("."); 
     var parent = window; 
     for (var i = 0; i < bindObjTree.length - 1; i++) { 
      parent = parent[bindObjTree[i]]; 
     } 
     child = bindObjTree[bindObjTree.length - 1]; 

     inputField.value = parent[child]; 

     inputField.onchange = function() { 
      var xp = parent; 
      var xc = child; 
      xp[xc] = inputField.value; 
      alert(JSON.stringify(window["qform"])); 
     }; 

    } // for 

    </script> 

그러나 두 번째 입력 필드 만 원하는대로 동작합니다. 누군가가 왜 그런지 설명 할 수 있습니까? 클로저와 관련이 있다고 생각합니다. 정말 솔루션을 찾는 것보다 내가 잘못하고있는 것을 이해하려고합니다. JQuery를 사용하여이 문제를 쉽게 해결할 수 있지만 실제로는 필요하지 않습니다.

Answer 1

문제는 다음과 같습니다

 parent = parent[bindObjTree[i]]; 
     child = bindObjTree[bindObjTree.length - 1]; 

및

inputField.onchange = function() { 
     var xp = parent; // Always refers to the element retrieved at index 1 of the for loop 
     var xc = child; // Always refers to the element retrieved at index 1 of the for loop 
     // This is regardless of which input's event handler executes 
     xp[xc] = inputField.value; 
     alert(JSON.stringify(window["qform"])); 
    }; 

이 항상 있기 때문에 폐쇄 루프의 마지막 반복에서 볼 수있는 요소를 참조합니다.

Answer 2

inputFields는 루프에 덮어하지 않거나

양식 태그에 ID를 배치하고 대신 자식 요소로 필드를 얻기 위해 참조 할 수 있도록 배열해야합니다.

Answer 3

child 변수의 글로벌어입니다. 사용해보십시오 :

var child = bindObjTree[bindObjTree.length - 1];

대신. 전역 변수이므로 두 번째 차례에서 전역 하위 변수를 덮어 씁니다.