Javascript表單輸入值更新僅在debbuging條件下成功

Question

我有一個奇怪的錯誤，我無法弄清楚。我有一個由CHART數組數組生成的html表。我試圖實現一個可以讓我改變一行內容的元素。如果我使用調試器並添加一些檢查點，但它不起作用，那麼它工作正常。

功能openModForm

我在JavaScript中創建一個div，我在我的表添加到單元格成一排。

我加載div中的輸入表單html。

JS將從CHART全局變量中獲取當前行中顯示的信息。

我使用當前值填充輸入的值屬性（以便如果用戶不想修改特定值，它將保持不變）。

function openModForm(x) 
    { 

     var updatebox = document.createElement("div"); 
     //we keep only one updatebox open at any time, right now i think to attach it to row 
     updatebox.id = 'updatebox'; 
     //so that the click on updatebox won't trigger the parent (modcell) function which would create more updateboxes 
     updatebox.addEventListener("click", stopEvent, false); 
     x.appendChild(updatebox); 
     //load form html to div 
     $("#updatebox").load("modform.html"); 
     //populate modform with default values 
     var rowind = x.parentElement.rowIndex; 
     var task = CHART[rowind-1][1]; 
     var person = CHART[rowind-1][2]; 
     var start = CHART[rowind-1][3]; 
     var end = CHART[rowind-1][4];//if i add debugger checkpoint here everything works as intended! 
     document.forms["UpdateForm"]["TaskInput"].value=task; 
     document.forms["UpdateForm"]["RespInput"].value=person; 
     document.forms["UpdateForm"]["StartInput"].value=start; 
     document.forms["UpdateForm"]["EndInput"].value=end; 

    } 

function stopEvent(ev) 
{ 
    ev.stopPropagation(); 
} 

接着函數modTask（）

它是由形式修改按鈕點擊激活。

它加載表單域中的值並將其替換到我的圖表中。

它也發送一個請求，以便在服務器上更改值。

function modTask() 
    { 
     var rowind = document.getElementById("updatebox").parentElement.parentElement.rowIndex; 
     var taskid = CHART[rowind-1][0]; 
     var task = document.forms["UpdateForm"]["TaskInput"].value; 
     var person = document.forms["UpdateForm"]["RespInput"].value; 
     var start = document.forms["UpdateForm"]["StartInput"].value; 
     var end = document.forms["UpdateForm"]["EndInput"].value; 
     var chartID=CHART[0][5]; 
     var xhr = typeof XMLHttpRequest != 'undefined' ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP'); 
     xhr.onreadystatechange=function() 
     { 
      if (this.readyState==4 && this.status==200) 
      { 

       document.getElementById("MessageArea").innerHTML=this.responseText; 
       //set new CHART values 
       CHART[rowind-1][1]=task; 
       CHART[rowind-1][2]=person; 
       CHART[rowind-1][3]=start; 
       CHART[rowind-1][4]=end; 
       //remove updatebox from modcell after work is done 
       var p=document.getElementById("updatebox").parentElement; 
       p.removeChild(p.childNodes[1]); 
      } 
     } 

     xhr.open("POST", "mod_task.php", true); 
     xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); 
     xhr.send("taskid="+encodeURIComponent(taskid) 
     +"&task="+encodeURIComponent(task) 
     +"&person="+encodeURIComponent(person) 
     +"&start="+encodeURIComponent(start) 
     +"&end="+encodeURIComponent(end) 
     +"&chid="+encodeURIComponent(chartID) 
     ); 
    } 

的BUG

如果我對openModForm行我有評論據此----一切都會按計劃調試檢查點。輸入字段顯示當前屬於此條目的值。我可以改變領域或讓他們成爲現實。

如果我刪除調試檢查點，那麼表單輸入字段顯示爲空，而實際上，如果我不更改它們，值屬性保持爲空，則會提交空字段。

我不明白這樣的事情是可能的。任何想法這個錯誤是什麼以及它是如何成爲受歡迎的。我嘗試做一些解決方法 - 比如直接從javascript生成表單域，而不是從html中加載它們，然後更新它們的值屬性。但是ID真的很想知道HELL發生了什麼，並且在將來我想改變導入表單的價值時有什麼解決方案。

Answer 1

這樣的錯誤通常告訴我問題在於時機。讓我的代碼解釋：

$("#updatebox").load("modform.html"); 
    // Do tons of stuff 

在這段代碼中，做頓塊不會等待#updatebox加載modform.html，所以你的代碼試圖操縱是尚未加載的形式。在調試器中工作的原因是，在調試時，在繼續執行塊之前，加載在後檯安靜地結束。如果沒有調試器，代碼會立即執行，並且在嘗試操作表單之前加載未完成。

這裏有一個簡單的解決辦法：

$("#updatebox").load("modform.html", function(){ 
     // Do tons of stuff 
    }); 

這將等待負載試圖做噸的東西之前完成。

以下是.load()的文檔。