在数组位置移动值时未获得正确的输出

debugcn 发表于 Dev

学习过度思考者困惑

我有1个数组，其中我的源和目标是这样的：

markers.push({
        "Location": "Chicago",
        "IsLocation": "Yes"
            });

    markers.push({
        "Location": "Los Angeles",
        "IsLocation": "Yes"
            });

现在，当我将使用动态文本框创建点时，我想在源和目标之间添加所有这些点。

方案1：第一个动态文本框，其输入内容为Eg：abc

markers[0]:Chicago
markers[1]:abc
marker[2]:Los Angeles.

方案2：第二个动态文本框，带有输入说如Eg：pqr

markers[0]:Chicago
markers[1]:abc
markers[2]:pqr
marker[3]:Los Angeles.

方案3：第三个动态文本框，其输入内容为Eg：lmn

markers[0]:Chicago
markers[1]:abc
markers[2]:pqr
markers[3]:lmn
marker[4]:Los Angeles.

我的第一个位置将被固定。

代码：

// Code goes here

var cnt = 1;
var maxNumberOfTextboxAllowed = 5;

var autocomplete = [];
var markers = [];

markers.push({
  "Location": "Chicago",
  "IsLocation": "Yes"
});

markers.push({
  "Location": "Los Angeles",
  "IsLocation": "Yes"
});

function Generatetextbox() {
  if (cnt <= maxNumberOfTextboxAllowed) {
    var fieldWrapper = $("<div class='fieldwrapper' id='field" + cnt + "'/>");
    var fName = $("<input type='text' class='fieldname' id='Txtopt" + cnt + "'  name='TxtoptNm" + cnt + "'  />");
    fieldWrapper.append(fName);
    fieldWrapper.append('<br />');
    fieldWrapper.append('<br />');
    $("#abc").append(fieldWrapper);
    var newInput = [];
    var newEl = document.getElementById('Txtopt' + cnt);
    var txtboxId = 'Txtopt' + cnt;
    newInput.push(newEl);
    setupAutocomplete(autocomplete, newInput, 0, txtboxId);
    cnt = cnt + 1;
  } else
    alert("Cant create more than 5 textbox")
}


function setupAutocomplete(autocomplete, inputs, i, txtboxId) {
  autocomplete.push((txtboxId));
  var idx = autocomplete.length - 1;
  document.getElementById(autocomplete[idx]).addEventListener("change", function() {
    alert(document.getElementById(autocomplete[idx]).value);
    var autoTextbox = [{
      "Location": document.getElementById(autocomplete[idx]).value,
      "IsLocation": "Yes"
    }]

    var markerLastIndexData = [{
      "Location": markers[markers.length - 1].Location,
      "IsLocation": "Yes"
    }]

    markers[markers.length - 1] = autoTextbox;
    markers[markers.length] = markerLastIndexData;
    console.log(markers)
  });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="abc"></div>
<button onclick="Generatetextbox()" class="btn btn-primary" type="button">Add</button>

您可以在控制台中检查。我得到的结果不正确。

获得这样的输出：

控制台输出未定义：

预期输出显示在我的方案中，例如：

marker[0]:{ 
          Location="Chicago",  
          Isolcation="Yes"
          }
marker[1]:{ 
          Location="abc",  
          Isolcation="Yes"
          }
etc......

吉尔赫·藤吉

之所以发生这种情况，是因为在setupAutocomplete函数中，您为标记Array分配了一个Array而不是Object。只需删除声明了将要推送到markers数组的两个变量的行上的[]即可。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。