javascript - onchange 事件未正确跟踪

Question

我有一个表单，我想跟踪任何更改。现在我已将其设置为当用户退出页面时，会显示一个警告框，说明对表单进行了多少更改。但是，它一直注册为 0。我已经测试过向 inputChanges 函数添加一个警报，告诉我发生了更改并且警报触发，但当我退出页面时，计数仍然注册为 0...

这是我的脚本:

window.onload = function() {
    var totalChanges = "";
    var inputHandles = 0;
    var selectHandles = 0;
    var textAreaHandles = 0;

window.onbeforeunload = function(){
    alert("Total Form Changes:" + totalChanges);
}//onbeforeunload

   var totalChanges = inputHandles + selectHandles + textAreaHandles;

   function inputChanges() {
   inputHandles++; 
   alert("Change");
   }

   var inputs = document.getElementsByTagName("input"); 
   for (i = 0; i < inputs.length; i++){
    inputs[i].onchange = inputChanges;
   }    

   function selectChanges(){
   selectHandles++;
   }

   var selects = document.getElementsByTagName("select");
   for (i = 0; i < selects.length; i++){
   selects[i].onselect = selectChanges;
  }

  function textAreaChanges(){
   textAreaHandles++;
  }

   var textAreas = document.getElementsByTagName("textarea");
  for (i = 0; i < textAreas.length; i++){
   textAreas[i].onchange = textAreaChanges;
  }
}//Onload

Answer 1

您在此处声明totalChanges:

var totalChanges = "";

...然后在这里重新声明它:

var totalChanges = inputHandles + selectHandles + textAreaHandles;

...此时您要添加的内容全部为 0。

您需要在需要该值的位置进行计算:

window.onbeforeunload = function(){
    totalChanges = inputHandles + selectHandles + textAreaHandles;
    alert("Total Form Changes:" + totalChanges);
}

或者最初设置totalChanges = 0，然后在每次其他变量发生变化时递增它，但这比较笨拙。

另请注意，您不是在计算现在值与其起始值不同的字段数量，而是在计算单独编辑的数量。因此，如果用户两次更改某个字段，而第二次更改又恢复为原始值，您的代码会将其跟踪为两次更改(逻辑上它是零更改)。