找不到動態生成的文本框

Question

我有兩個功能-一個采用某種格式的URL（例如“ test.com?action=query&max_results=20”）並將其分解為動態生成的文本框以進行編輯。 另一個將其與所有編輯一起放回原處。 通過單擊按鈕可以調用這兩個功能。

第二個功能無法找到動態生成的文本框的ID-它們以“空”形式返回。 如何獲取識別頁面加載后創建的ID的函數？

碼：

    <script>

    function Split()
    {
        //Get table body for insert
        var table = document.getElementById("ValueTableBody");

        //Clear table of rows
        table.innerHTML = '';

        //Grab URL
        var URLquery = document.getElementById("oldquery").value;

        //Split on ? to isolate query
        var querysplit = oldquery.split("?");

        //Store main url
        var mainURL = document.getElementById('mainURL');
        mainURL.value=querysplit[0];

        //Split on & to isolate variables
        var splitagain = querysplit[1].split("&");             

        var i = 0;

        //Loop on number of variables in query
        for(i = 0; i < splitagain.length; i++){
            //Split on = to isolate variables and values
            var splitthird = splitagain[i].split("=");

            //Insert new row into table
            var row = table.insertRow(i);

            row.insertCell(0).innerHTML = '<input type="text" id="query' + i + '"/>';
            row.insertCell(1).innerHTML = '<input size="50" type="text" id="queryvalue' + i + '"/>';

            //Insert variable and value into respective inputs.
            var split1 = document.getElementById('query' + i);
            split1.value=splitthird[0];

            var split2 = document.getElementById('queryvalue' + i);
            split2.value=splitthird[1];
        }

    }

    function Unsplit()
    {
        var mainURL = document.getElementById('mainURL').value;
        var completequery = [];
        var URLarray = [];

        var rowCount = document.getElementById('ValueTableBody').rows.length; 

        for(i = 0; i <= rowCount; i++){

            //Get variable of current row
            var value1 = document.getElementById('query' + i).value;

            //Get value of current row
            var value2 = document.getElementById('queryvalue' + i).value;

            if (value1) {
                if (value2) {

                    //If both have value, then push into array
                    valueArray = [];

                    valueArray.push(value1);

                    valueArray.push(value2);

                    //Merge into one to push into next array                   
                    var newvalue = valueArray.join("=");

                    URLarray.push(newvalue);
                }
            }
        }

        //Join all sections of the query together
        mergearray = URLarray.join("&");

        //Push mainURL
        completequery.push(mainURL);

        //Push completed query
        completequery.push(mergearray);

        //Join the query together to make complete new URL
        mergearray2 = completequery.join("?");

        //Display new URL
        var newquery = document.getElementById('newquery');
        newquery.value=mergearray2;

        //Output new URL to iframe
        document.getElementById('webservicedisplay').src = mergearray2;

    }
</script>

HTML：

<div style="float:left;">

<h1>Webservice Tester</h1>

<p><label style="font-weight:bold; display:inline-block; vertical-align:top;">Old Webservice Call:</label> <textarea cols="60" rows="4" id="oldquery"></textarea></p>

<input type="submit" name="button" id="splitbutton" onclick="Split()" value="Split!" /> <br><br>

<p><label style="font-weight:bold;">URL:</label> <input type="text" size="50" id="mainURL"></input></p><br>

<table id="ValueTable">
    <thead>
        <th>Variable</th>
        <th>Value</th>
    </thead>
    <tbody id="ValueTableBody">
    </tbody>
</table>

<br>

<p><input type="submit" name="button" id="unsplit" onclick="Unsplit()" value="Unsplit!" /></p> <br><br>

<p><label style="font-weight:bold; vertical-align:top;">New Webservice Call:</label> <textarea cols="60" rows="4" id="newquery"></textarea></p>

</div>

<div style="float:left; padding-left:20px;">

<p><label style="font-weight:bold;">Output:</label></p><br>

<iframe height="450" width="500" id="webservicedisplay" src="">

</iframe>

Answer 1

這是由作者解決的，因為“問題實際上是具有“ <=”條件的循環-它正在尋找不存在的另一表行。

我曾建議以不同的方式編寫JS：

        row.insertCell(0).innerHTML = '<input type="text" id="query' + i + '" value="' + splitthird[0] + '"/>';
        row.insertCell(1).innerHTML = '<input size="50" type="text" id="queryvalue' + i + '" value="' + splitthird[1] + '"/>';

並刪除：

        //Insert variable and value into respective inputs.
        var split1 = document.getElementById('query' + i);
        split1.value=splitthird[0];

        var split2 = document.getElementById('queryvalue' + i);
        split2.value=splitthird[1];