当我向索引添加新的数组时，以前的数组元素是未定义的

Question

这是我昨天早些时候提到的this question的扩展，我最初认为这是jQuery的.bind或.keyup事件导致它，但它比那更神秘了

我创建了一个video over here来更详细地解释，抱歉质量。

var stopTimeArray = []
$('.mdl-textfield__input.stage-time.stop_time').bind('input', function() {
    console.log('stopTimeArray', stopTimeArray)
    var stopTimeVal = parseInt(this.value)
    console.log('stopTimeVal', stopTimeVal) //always prints [] on new form
    var index = parseInt($(currentStage()).attr('rel')) - 1
    console.log('index', index)
    stopTimeArray[index] = stopTimeVal
    updateTTH();
    debugger;
  });

  function updateTTH() {
    console.log(stopTimeArray)
    // other code...
  }

基本上我有一个你可以复制的表格。我只是想在编辑时获取特定输入的值，将其推送到数组以便我可以得到总数。例如，假设在第一种形式中，我输入20，它将打印

  

stopTimeArray►[]

     

stopTimeVal 2

     

索引0

     

►[2]

...

  

stopTimeArray►[2]

     

stopTimeVal 20

     

索引0

     

►[20]

这很完美，这正是我想要的。但是，当我想在第二种表单中添加内容时会出现问题。假设我们想在新表单中添加8。这是结果......

  

stopTimeArray►[]

我不知道为什么，但很明显，某种方式是stopTimeArray被覆盖并重置。

  

stopTimeVal 8

     

索引1

     

►（2）[undefined×1,8]

这是一个我迷失的问题，因为我认为机器是错的（jk）。但是，如果你们对此有所了解，请告诉我们：）

编辑： currentStage（）正如预期的那样完美地运行，但是在这里，你们想要看到它。

var currentStage = function findCurrentStageContainer() {
     var numStages = document.getElementsByClassName('stage-container').length;
     for (var i = 0; i <  numStages; i++) {
       if (!hasClass(document.getElementsByClassName('stage-container')[i], "hidden-form")) {
         return document.getElementsByClassName('stage-container')[i]
       }
     }
   }