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()的文档。