Невозможно найти динамически сгенерированные текстовые поля

Question

У меня есть две функции: один получает URL-адрес в определенном формате (например, «test.com?action=query & max_results = 20») и разбивает его на динамически генерируемые текстовые поля для редактирования. Другой ставит его вместе вместе с любыми изменениями. Обе функции вызываются нажатием кнопки.

Вторая функция не может найти идентификаторы динамически генерируемых текстовых полей - они возвращаются как «null». Как получить функцию для распознавания идентификаторов, созданных после загрузки страницы?

Код:

<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];