What I have is a single textbox. If the user hits the maxlength of it, I want to create a new textbox and then change focus to it so they can continue typing.

To accomplish this, I am trying to dynamically create textboxes that have an onkeyup event tied to them. To do this I am using document.createElement and the creation of the element works. The problem is that I can't get the parameters (the id of the current textbox and the id of the one to be created) to pass correctly and they are simply variables. Before I pass them I can test them and they are fine, but in the method they are null.

Here is my code:

 <script type="text/javascript">

    var i = 2;

    function CreateTextbox() {

  var box = document.getElementById(divCreateTextbox);

        var curr = 'txt' + i;

        var next = 'txt' + (i + 1);



        var inp = document.createElement('input')

        inp.type = 'text';

        inp.name = 'textfield';

        inp.maxlength = '10';

        inp.id = curr;

        inp.setAttribute('onkeyup', 'moveOnMax(inp.id, next)');

        inp.onkeyup = function() { moveOnMax(inp.id, next); };



        box.appendChild(inp);

        box.innerHTML += "<br />";



        i++;



        return next;

    }



    function moveOnMax(field, nextFieldID) {

        if (field.value.length >= field.maxLength) {

            if (document.getElementById(nextFieldID) == null) {

                var id = CreateTextbox();



                if (document.getElementById(id) != null) {

                    document.getElementById(id).focus();

                }

                else

                    alert("problem...");

            }

        }

    }

</script>



   <div id="divCreateTextbox">

I am pretty new to Javascript, so if this is completely fubar'd, I apologize.

Any help is appreciated.